Port over controller logic from Python.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Mon, 8 Sep 2014 14:20:04 +0000 (16:20 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Mon, 8 Sep 2014 14:20:04 +0000 (16:20 +0200)
src/data/sound/starting-line.ogg [new file with mode: 0644]
src/index.html
src/main.js
src/yuu/audio.js

diff --git a/src/data/sound/starting-line.ogg b/src/data/sound/starting-line.ogg
new file mode 100644 (file)
index 0000000..7028829
Binary files /dev/null and b/src/data/sound/starting-line.ogg differ
index c1b80323c98414c4ac02eac06c97ca5900fe245b..24ab4634ea83e375ed631193221438d4b0fd1e3b 100644 (file)
@@ -37,7 +37,7 @@
   </head>
   
   <body>
-    <canvas id="yuu-canvas" data-yuu-resize>
+    <canvas id="yuu-canvas" data-yuu-width=4 data-yuu-height=3 data-yuu-resize>
     </canvas>
     <div id="yuu-error" class="yuu-overlay"
          data-yuu-animation="yuu-from-top"
index 26ec069c6990c51fb170b8a1b555aaaf271c7c95..36f874e4c456985c00572cb26719ed337872bab4 100644 (file)
 
 var storage;
 
-/*var PlayerController = new yT(yuu.C, {
-    constructor: function () {
-        
+var PlayerController = new yT(yuu.C, {
+    constructor: function (body, left, right) {
+        this.body = body;
+        this.left = left;
+        this.right = right;
+        this.dleftLeft = this.dleftRight = 
+            this.drightLeft = this.drightRight = 0;
+        this.up = 0;
+        this.leftPivot = 0;
+        this.rightPivot = 0;
+        this.x = this.lastX = body.x;
+        this.y = this.lastY = body.y;
+        this.commands = {
+            dleftLeft: yuu.propcmd(this, 'dleftLeft'),
+            dleftRight: yuu.propcmd(this, 'dleftRight'),
+            drightLeft: yuu.propcmd(this, 'drightLeft'),
+            drightRight: yuu.propcmd(this, 'drightRight'),
+            up: yuu.propcmd(this, 'up'),
+        };
+    },
+
+    _updatePivots: function () {
+        var PIVOT_SPEED = 0.03;
+        var leftSpeed = (this.dleftRight - this.dleftLeft) * PIVOT_SPEED;
+        var rightSpeed = (this.drightLeft - this.drightRight) * PIVOT_SPEED;
+        this.leftPivot = yf.clamp(this.leftPivot + leftSpeed, 0, 1);
+        this.rightPivot = yf.clamp(this.rightPivot + rightSpeed, 0, 1);
+    },
+
+    _updateTransforms: function () {
+        this.left.yaw = -this.leftPivot * Math.PI / 2;
+        this.right.yaw = this.rightPivot * Math.PI / 2;
+        this.body.x = this.x;
+        this.body.y = this.y;
+    },
+
+    tick: function () {
+        this._updatePivots();
+        var dt = 0.016;
+        var GRAVITY = 1;
+        var DRAG_MAX = 1;
+        var LIFT_MAX = 1;
+
+
+        var left = (1 - this.leftPivot) * Math.PI / 2;
+        var right = (1 - this.rightPivot) * Math.PI / 2;
+
+        var vx = (this.x - this.lastX) / dt;
+        var vy = (this.y - this.lastY) / dt;
+
+        var rotor = 1 * this.up;
+
+        var cleft = Math.cos(left);
+        var cright = Math.cos(right);
+        var sleft = Math.sin(left);
+        var sright = Math.sin(right);
+
+        var dvyleft = sleft * rotor;
+        var dvyright = sright * rotor;
+        var dvxleft = cleft * rotor;
+        var dvxright = cright * rotor;
+
+        var dvx = (dvxleft - dvxright);
+        var dvy = (dvyleft + dvyright) - GRAVITY;
+
+        var leftarea = DRAG_MAX * Math.abs(sleft);
+        var rightarea = DRAG_MAX * Math.abs(sright);
+        var dragy = vy * vy * (leftarea + rightarea);
+
+        leftarea = DRAG_MAX * Math.abs(cleft);
+        rightarea = DRAG_MAX * Math.abs(cright);
+        var dragx = vx * vx * (leftarea + rightarea);
+
+        leftarea = LIFT_MAX * Math.abs(cleft);
+        rightarea = LIFT_MAX * Math.abs(cright);
+        var liftx = vy * vy * (rightarea - leftarea);
+
+        leftarea = LIFT_MAX * Math.abs(sleft);
+        rightarea = LIFT_MAX * Math.abs(sright);
+        var lifty = vx * vx * (rightarea - leftarea);
+
+        if (vy > 0) {
+            dragy = -dragy;
+            liftx = -liftx;
+        }
+        if (vx > 0) {
+            dragx = -dragx;
+            lifty = -lifty;
+        }
+
+        var ax = dvx + liftx + dragx;
+        var ay = dvy + lifty + dragy;
+
+        var origX = this.x;
+        var origY = this.y;
+        this.x += (this.x - this.lastX) + ax * dt * dt;
+        this.y += (this.y - this.lastY) + ay * dt * dt;
+        this.y = Math.max(0, this.y);
+        this.lastX = origX;
+        this.lastY = origY;
+        this._updateTransforms();
     },
 
     TAPS: ['tick'],
-});*/
+});
 
 var GameScene = yT(yuu.Scene, {
     constructor: function () {
         yuu.Scene.call(this);
 
-        this.layer0.resize(-0.5, -0.5, 1, 1);
+        this.layer0.resize(-1.3333333333/2, -0.2, 1.3333333333, 1);
 
-        this.player = new yuu.E(new yuu.Transform(),
-                                new yuu.QuadC('@player'));
-        var leftWing = new yuu.E(new yuu.Transform(),
-                                 new yuu.QuadC('@left'));
-        var rightWing = new yuu.E(new yuu.Transform(),
-                                  new yuu.QuadC('@right'));
+        var body, left, right;
+        this.player = new yuu.E(body = new yuu.Transform()
+                                .setScale([0.081, 0.091, 1]),
+                                new yuu.QuadC('@player')
+                                .setAnchor('bottom')
+                                .setPosition([0, 0]));
+        var leftWing = new yuu.E(left = new yuu.Transform()
+                                 .setPosition([-0.3, 0.65, 0])
+                                 .setScale([0.45, 0.22, 1]),
+                                 new yuu.QuadC('@left')
+                                 .setZ(-1)
+                                 .setAnchor("right")
+                                 .setPosition([0, 0]));
+        var rightWing = new yuu.E(right = new yuu.Transform()
+                                  .setPosition([0.3, 0.65, 0])
+                                  .setScale([0.45, 0.22, 1]),
+                                  new yuu.QuadC('@right')
+                                  .setZ(-1)
+                                  .setAnchor('left')
+                                  .setPosition([0, 0]));
         this.player.addChildren(leftWing, rightWing);
         this.entity0.addChild(this.player);
 
+        var ground = new yuu.E(new yuu.Transform()
+                               .setPosition([0, -10, 1])
+                               .setScale([100, 20, 1]),
+                               new yuu.QuadC()
+                               .setColor([0, 0.5, 0, 1]));
+        this.entity0.addChild(ground);
+
+        this.player.attach(
+            this.controller = new PlayerController(body, left, right));
+        Object.assign(this.commands, this.controller.commands);
+
         this.ready = yuu.ready([
             new yuu.Material('@player'),
             new yuu.Material('@left'),
             new yuu.Material('@right')]);
     },
 
+    init: function () {
+        var audio0 = new Audio();
+        audio0.src = audio0.canPlayType('audio/ogg')
+            ? "data/sound/starting-line.ogg"
+            : "data/sound/starting-line.mp3";
+        audio0.autoplay = true;
+        audio0.loop = true;
+        document.body.appendChild(audio0);
+        var source = yuu.audio.createMediaElementSource(audio0);
+        source.connect(yuu.audio.music);
+    },
+
     KEYBINDS: {
         space: '+up',
         up: '+up',
-        q: '+dleft_left',
-        w: '+dleft_right',
-        o: '+dright_left',
-        p: '+dright_right',
+        q: '+dleftLeft',
+        w: '+dleftRight',
+        o: '+drightLeft',
+        p: '+drightRight',
     }
 });
 
@@ -50,6 +185,7 @@ function load () {
     yuu.audio.storage = storage;
     var game = new GameScene();
     yuu.director.pushScene(game);
+    return game.ready;
 }
 
 window.addEventListener("load", function() {
index 881924ee58ff4c8fe85cf0b6071a8c8827a740b4..128ff847e5647d7dc410f0af695bc0318485ca16 100644 (file)
 
         sampleRate: { alias: "_ctx.sampleRate" },
         createGain: { proxy: "_ctx.createGain" },
+        createMediaElementSource: { proxy: "_ctx.createMediaElementSource" },
         createOscillator: { proxy: "_ctx.createOscillator" },
     });