added virtualjoystick.js support + announce canvas version in nowebgl…

… dialog
jeromeetienne · Dec 24, 2011 · c809b6b · c809b6b
1 parent 728ae6a
commit c809b6b
Show file tree

Hide file tree

Showing 11 changed files with 413 additions and 11 deletions.
diff --git a/css/pageLandingMain.css b/css/pageLandingMain.css
@@ -114,8 +114,8 @@
 
 #pageLandingContainer .nowebglDialog {
  width : 30em;
- height : 25em;
- margin : -12.5em 0 0 -15em;
+ height : 26em;
+ margin : -13em 0 0 -15em;
 }
 
 #pageLandingContainer .tutorialDialog {

diff --git a/embedded.html b/embedded.html
@@ -6,7 +6,7 @@
  <input type="button" class="sizeButton" value="640x480" data-width="640px" data-height="480px">
  <input type="button" class="sizeButton" value="800x600" data-width="800px" data-height="600px">
  </div>
- <iframe src="index.html"
+ <iframe src="index.html?bypasslanding=1&render=canvas"
  allowfullscreen webkitallowfullscreen mozallowfullscreen
  width='320' height='240'>
  </iframe>

diff --git a/index.html b/index.html
@@ -1,4 +1,9 @@
+<html>
 <head>
+ <title>Marble Soccer</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
  <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/cfbcdiidnfncmcomhfnfbpcpfikjemie"/>
 
  <link rel='stylesheet' href="css/main.css" />
@@ -131,13 +136,15 @@ <h3>Ouch no WebGL :(</h3>
  <center>
  <span class="youtube"></span>
  </center>
-
+ <p style="font-size: 80%; float: right">
+ try an <b>experimental</b> <a href="/?render=canvas">canvas version</a>
+ </p>
  </div>
  </div></div>
 
  <!-- include weinre client script to debug on mobile -->s
- <script src="https://192.168.0.10:8080/target/target-script-min.js#anonymous"></script>
-
+<!-- <script src="https://192.168.0.10:8080/target/target-script-min.js#anonymous"></script>
+-->
  <!-- include javascript files -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/jquery/jquery.url.js"></script>
@@ -171,6 +178,8 @@ <h3>Ouch no WebGL :(</h3>
  <script src='./vendor/microevent.js/microevent.js'></script>
  <script src='./vendor/excanvas.js'></script>
 
+ <script src='./vendor/virtualjoystick.js/virtualjoystick.js'></script>
+
  <script src="https://myapps.mozillalabs.com/jsapi/include.js"></script>
  <script src='./js/threex.mozillaWebStoreInstall.js'></script>
 
@@ -190,6 +199,7 @@ <h3>Ouch no WebGL :(</h3>
  <script src='js/lib/microphysics.maxSpeedAccelerator.js'></script>
  <script src='js/lib/microphysics.threexKeyboardAccelerator.js'></script>
  <script src='js/lib/microphysics.threexDeviceOrientationAccelerator.js'></script>
+ <script src='js/lib/microphysics.virtualjoystickAccelerator.js'></script>
  <script src="js/lib/visualFx.js"></script>
 
  <script src='tmp/particles-emitter/threex.particlesemitter.js'></script>
@@ -238,4 +248,5 @@ <h3>Ouch no WebGL :(</h3>
 
  </script>
  </body>
-</body>
+</body>
+</html>
diff --git a/js/lib/microphysics.virtualJoystickAccelerator.js b/js/lib/microphysics.virtualJoystickAccelerator.js
@@ -0,0 +1,29 @@
+vphy.VirtualJoystickAccelerator = vphy.Class({
+ __extends__ : vphy.Accelerator,
+ __init__ : function(args){
+ var params = vphy.extend({
+ }, args);
+ this.bodies = params.bodies;
+ this.joystick = params.joystick;
+ this.acceleration = params.acceleration;
+ },
+ perform : function(){
+ var joystick = this.joystick;
+ var acc = this.acceleration;
+ var key = {
+ right : joystick.right(),
+ up : joystick.up(),
+ left : joystick.left(),
+ down : joystick.down()
+ };
+ // TODO do something like device orientation
+ // something which takes advantage of the analogic part
+ for(var i = 0; i < this.bodies.length; i++){
+ var body = this.bodies[i];
+ if( key.right ) body.accelerate(+acc,0,0);
+ if( key.left ) body.accelerate(-acc,0,0);
+ if( key.up ) body.accelerate(0,0,-acc);
+ if( key.down ) body.accelerate(0,0,+acc);
+ }
+ }
+});
diff --git a/js/pageGameLife.js b/js/pageGameLife.js
@@ -1,6 +1,7 @@
 // TODO reduce the amount of global
 var gameLevel;
 var camera, scene, renderer;
+var vJoystick;
 
 //////////////////////////////////////////////////////////////////////////////////
 // ctor/dtor //
@@ -96,6 +97,32 @@ Marble.PageGameLife.prototype._init = function(){
  // for debug - display xyz axes on the screen
  scene.add(new THREE.Axes());
 
+// TODO fix this init
+// - add a destructor
+(function(){
+ //if( 'createTouch' in document === false ) return;
+ var container = document.createElement('div');
+ container.style.width = '100%';
+ container.style.height = '100%';
+ container.style.position = 'absolute';
+ container.style.top = '0px';
+ container.style.left = '0px';
+
+ document.body.appendChild(container);
+
+ var subContainer= document.createElement('div');
+ subContainer.style.position = 'relative';
+ subContainer.style.width = '100%';
+ subContainer.style.height = '100%';
+ container.appendChild(subContainer);
+
+ var joystick = vJoystick = new VirtualJoystick({
+ container : subContainer,
+ debug : true
+ });
+}());
+
+
  gameLevel = new Marble.GameLevel();
 
  this._winResize = THREEx.WindowResize(renderer, gameLevel.camera().object());

diff --git a/js/pageLandingMain.js b/js/pageLandingMain.js
@@ -15,10 +15,13 @@ Marble.PageLandingMain = function()
  this._pageGameMain = null;
 
  jQuery(this._pageSel).show();
+
+
+Detector.webgl = false;
+
 
- if( false ){
- if( Detector.webgl ) this._menuShow();
- else this._nowebglShow(); 
+ if( !Detector.webgl && !jQuery.url().param('render') ){
+ this._nowebglShow(); 
  }else{
  this._menuShow(); 
  }

diff --git a/js/player.js b/js/player.js
@@ -22,14 +22,24 @@ Marble.Player = function()
  microphysics.world().add(this._keyboardAcc);
 
  // accelerator for deviceOrientation
- if( true ){
+ if( false ){
  this._devOrientAcc = new vphy.ThreexDeviceOrientationAccelerator({
  bodies : [microphysics.body(this.mesh())],
  deviceOrientation : devOrientation
  });
  microphysics.world().add(this._devOrientAcc); 
  }
 
+ // accelerator for deviceOrientation
+ if( vJoystick ){
+ this._virtualJoystickAcc = new vphy.VirtualJoystickAccelerator({
+ bodies : [microphysics.body(this.mesh())],
+ acceleration : 8*Marble.tileSize,
+ joystick : vJoystick
+ });
+ microphysics.world().add(this._virtualJoystickAcc); 
+ }
+
  this._fpsControl = new Marble.PlayerFpsControl();
 }
 
@@ -49,6 +59,9 @@ Marble.Player.prototype.destroy = function()
  this._devOrientAcc && microphysics.world().remove(this._devOrientAcc);
  this._devOrientAcc = null; 
 
+ this._virtualJoystickAcc&& microphysics.world().remove(this._virtualJoystickAcc);
+ this._virtualJoystickAcc = null; 
+
  this._fpsControl && this._fpsControl.destroy();
  this._fpsControl = null; 
 }

diff --git a/vendor/virtualjoystick.js/Makefile b/vendor/virtualjoystick.js/Makefile
@@ -0,0 +1,11 @@
+# makefile to automatize simple operations
+
+server:
+ python -m SimpleHTTPServer
+
+deploy:
+ # assume there is something to commit
+ # use "git diff --exit-code HEAD" to know if there is something to commit
+ # so two lines: one if no commit, one if something to commit 
+ git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~
+
diff --git a/vendor/virtualjoystick.js/README.md b/vendor/virtualjoystick.js/README.md
@@ -0,0 +1 @@
+a virtual joystick for touchscreen. 
diff --git a/vendor/virtualjoystick.js/index.html b/vendor/virtualjoystick.js/index.html
@@ -0,0 +1,57 @@
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+ <style>
+ body {
+ overflow : hidden;
+ padding : 0;
+ margin : 0;
+ background-color: #BBB;
+ -webkit-user-select : none;
+ }
+ #info {
+ position : absolute;
+ top : 0px;
+ width : 100%;
+ padding : 5px;
+ text-align : center;
+ }
+ #info a {
+ color : #66F;
+ text-decoration : none;
+ }
+ #info a:hover {
+ text-decoration : underline;
+ }
+ #container {
+ width : 100%;
+ height : 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container"></div>
+ <div id="info">
+ <a href="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/jeromeetienne/virtualjoystick.js" target="_blank">VirtualJoystick.js</a>
+ A library javascript to provide a virtual joystick on touchscreen.
+ -
+ inspired by this
+ <a href="https://sebleedelisle.com/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/">post</a>
+ from
+ <a href="https://sebleedelisle.com/">seb.ly</a>
+ <br/>
+ Touch the screen and move
+ -
+ works with mouse too as debug
+ </div> 
+ <script src="virtualjoystick.js"></script>
+ <script>
+ var joystick = new VirtualJoystick({
+ container : document.getElementById('container'),
+ debug : true
+ });
+ </script>
+ </body>
+</html>