src/main.js

   1 "use strict";
   2
   3 var DISAPPEAR = {
   4      0: { tween: { transform: { yaw: Math.PI } },
   5           duration: 35 },
   6     10: { tween: { quad: { alpha: 0 } },
   7           duration: 25 }
   8 };
   9
  10 var JUMP = {
  11     0:   { tween1: { scale: [0.6, 0.3, 1.0] }, duration: 20 },
  12     20: [{ tween1: { scale: [0.3, 0.6, 1.0] }, duration: 18 },
  13          { tween1: { xy: 'target' }, duration: 20 }],
  14     38:  { tween1: { scale: [0.5, 0.5, 1.0] }, duration: 5 },
  15 };
  16
  17 var FollowScene = yT(yuu.Scene, {
  18     constructor: function () {
  19         yuu.Scene.call(this);
  20         var textMat = new yuu.Material("@text");
  21         var faceMat = new yuu.Material("@face");
  22
  23         var textQuad;
  24         var textEntity = new yuu.E(
  25             new yuu.Transform().setScale([1, 1, 1]),
  26             textQuad = new yuu.QuadC(textMat));
  27         this.faceEntity = new yuu.E(
  28             new yuu.Transform().setScale([0.5, 0.5, 1]),
  29             new yuu.QuadC(faceMat));
  30         this.entity0.addChild(textEntity);
  31         this.entity0.addChild(this.faceEntity);
  32
  33         this.disappear = function () {
  34             textEntity.attach(new yuu.Animation(DISAPPEAR, {
  35                 transform: textEntity.transform,
  36                 quad: textQuad
  37             }));
  38         };
  39
  40         this.ready = yuu.ready([textMat, faceMat], this);
  41      },
  42
  43     inputs: {
  44         resize: function () {
  45             var base = new yuu.AABB(-1.5, -1.5, 1.5, 1.5);
  46             var vp = base.matchAspectRatio(yuu.viewport);
  47             this.layer0.resize(vp.x0, vp.y0, vp.w, vp.h);
  48         },
  49
  50         mousemove: function (p) {
  51             p = this.layer0.worldFromDevice(p);
  52             var d = 0.75 * (p.x - this.faceEntity.transform.x);
  53             var angle = Math.PI / 2 * d;
  54             if (!angle)
  55                 angle = 0;
  56             angle = yf.clamp(angle, -Math.PI / 2, Math.PI / 2);
  57             this.faceEntity.transform.roll = angle + Math.PI / 2;
  58         },
  59
  60         touch: function (p) { this.inputs.mousemove.call(this, p); },
  61
  62         tap: function (p) {
  63             this.disappear();
  64             this.disappear = yf.I;
  65             p = this.layer0.worldFromDevice(p);
  66             this.faceEntity.attach(new yuu.Animation(JUMP, {
  67                 $: this.faceEntity.transform,
  68                 target: [p.x, p.y]
  69             }));
  70         },
  71     },
  72 });
  73
  74 function load () {
  75     yuu.director.pushScene(new FollowScene());
  76 }
  77
  78 window.addEventListener("load", function() {
  79     yuu.registerInitHook(load);
  80     yuu.init({ backgroundColor: [1, 1, 1, 0] })
  81         .then(function () { yuu.director.start(); });
  82 });
  83