TypeScript + CreateJS – 水玉製作所

先日の投稿TypeScriptを使うの続きです。TypeScriptでCreateJSを用いると非常に便利です。何が便利かというとCreateJSのクラスを継承したクラスが簡単に作れるところです。

とりあえずサンプルはこちらです。

こちらのサンプルで用いている赤いボールはTypeScriptを使用して以下のように定義されています。

/// <reference path="../ts/easeljs/easeljs.d.ts" />
/// <reference path="../ts/tweenjs/tweenjs.d.ts" />
class SpringBall extends createjs.Container{

    public spring:number = 0.01;
    public friction:number = 0.9;
    public vx:number = 0;
    public vy:number = 0;

    private shape:createjs.Shape;
    private GRAVITY:number = 0.5;

    constructor(){
        super();

        this.shape = new createjs.Shape();
        var g:createjs.Graphics = this.shape.graphics;
        g.beginFill("red");
        g.drawCircle(0, 0, 10);
        g.endFill();
        this.addChild(this.shape);
    }

    public updatePosition(targetX:number, targetY:number){
        var dx:number = targetX - this.x;
        var dy:number = targetY - this.y;
        var aX:number = dx * this.spring;
        var aY:number = dy * this.spring;

        this.vx += aX;
        this.vy += aY;
        this.vy += this.GRAVITY;

        this.vx *= this.friction;
        this.vy *= this.friction;
        this.x += this.vx;
        this.y += this.vy;
    }
}

/// <reference path="../ts/easeljs/easeljs.d.ts" />

/// <reference path="../ts/tweenjs/tweenjs.d.ts" />

class SpringBall extends createjs.Container{

public spring:number = 0.01;

public friction:number = 0.9;

public vx:number = 0;

public vy:number = 0;

private shape:createjs.Shape;

private GRAVITY:number = 0.5;

constructor(){

super();

this.shape = new createjs.Shape();

var g:createjs.Graphics = this.shape.graphics;

g.beginFill("red");

g.drawCircle(0, 0, 10);

g.endFill();

this.addChild(this.shape);

}

public updatePosition(targetX:number, targetY:number){

var dx:number = targetX - this.x;

var dy:number = targetY - this.y;

var aX:number = dx * this.spring;

var aY:number = dy * this.spring;

this.vx += aX;

this.vy += aY;

this.vy += this.GRAVITY;

this.vx *= this.friction;

this.vy *= this.friction;

this.x += this.vx;

this.y += this.vy;

}

これが以下の非常にスマートなJavaScriptへと変換されます。
美しいコードなんですが、継承のあたりは自分で書くと大変そうですね。この大変な部分を補ってくれるTypeScriptは本当に素晴らしいと感じています。

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var SpringBall = (function (_super) {
    __extends(SpringBall, _super);
    function SpringBall() {
        _super.call(this);
        this.spring = 0.01;
        this.friction = 0.9;
        this.vx = 0;
        this.vy = 0;
        this.GRAVITY = 0.5;
        this.shape = new createjs.Shape();
        var g = this.shape.graphics;
        g.beginFill("red");
        g.drawCircle(0, 0, 10);
        g.endFill();
        this.addChild(this.shape);
    }
    SpringBall.prototype.updatePosition = function (targetX, targetY) {
        var dx = targetX - this.x;
        var dy = targetY - this.y;
        var aX = dx * this.spring;
        var aY = dy * this.spring;
        this.vx += aX;
        this.vy += aY;
        this.vy += this.GRAVITY;
        this.vx *= this.friction;
        this.vy *= this.friction;
        this.x += this.vx;
        this.y += this.vy;
    };
    return SpringBall;
})(createjs.Container);

var __extends = this.__extends || function (d, b) {

function __() { this.constructor = d; }

__.prototype = b.prototype;

d.prototype = new __();

};

var SpringBall = (function (_super) {

__extends(SpringBall, _super);

function SpringBall() {

_super.call(this);

this.spring = 0.01;

this.friction = 0.9;

this.vx = 0;

this.vy = 0;

this.GRAVITY = 0.5;

this.shape = new createjs.Shape();

var g = this.shape.graphics;

g.beginFill("red");

g.drawCircle(0, 0, 10);

g.endFill();

this.addChild(this.shape);

}

SpringBall.prototype.updatePosition = function (targetX, targetY) {

var dx = targetX - this.x;

var dy = targetY - this.y;

var aX = dx * this.spring;

var aY = dy * this.spring;

this.vx += aX;

this.vy += aY;

this.vy += this.GRAVITY;

this.vx *= this.friction;

this.vy *= this.friction;

this.x += this.vx;

this.y += this.vy;

};

return SpringBall;

})(createjs.Container);

スマホのブラウザで即参加！

スマホのブラウザで即参加！

スマホのブラウザで即参加！

Related Posts

Air for Android 顔認識アプリ「ブタオメン」を作りました

CreateJS エディタ編（FlashDevelop）

タコ焼き日和にむけて のらアプリ

Three.jsに触れてみる2

タコ焼き日和にむけて　のらアプリ