Cocos Creator 試す

creator.d.tsでエラーが出まくる

よく見ると _の部分でエラー。なので、多分htmlの変換だろうということで _ → _ に置換。 https://www.w3.org/MarkUp/html-spec/html-spec_13.html

Spriteにマウスイベント追加

@property(cc.Sprite) sprite: cc.Sprite = null;

start() {
  this.onMouseEvent(this.sprite.node);
}

// getLocation()など専用のAPIを使う場合、cc.EventMouseの型を指定する。
onMouseEventTest(node: cc.Node) {
    node.on(cc.Node.EventType.MOUSE_DOWN, (event: cc.Event.EventMouse) => {
        console.log('Mouse Down');
    });
    node.on(cc.Node.EventType.MOUSE_LEAVE, (event: cc.Event.EventMouse) => {
        console.log('Mouse Leave');
    });
    node.on(cc.Node.EventType.MOUSE_MOVE, (event: cc.Event.EventMouse) => {
        console.log('Mouse Move');
        console.log(event.getLocation());
    });
    node.on(cc.Node.EventType.MOUSE_UP, (event: cc.Event.EventMouse) => {
        console.log('Mouse Up');
    });
}

プレハブ生成 + Buttonのクリックイベント

http://www.cocos2d-x.org/docs/creator/en/components/button.html?h=button

http://www.cocos2d-x.org/docs/creator/en/getting-started/quick-start.html?h=random

※ プレハブはUnityのように一度ノードツリーからアセットツリーにD&Dしたら作成されます。

@property(cc.Prefab) prefab: cc.Prefab = null;
@property(cc.Button) button: cc.Button = null;

start() {
  this.button.node.on('click', (event) => {
    console.log('click');
    this.onCreateAsset();
  });
}

onCreateAsset() {
  let newNode = cc.instantiate(this.prefab);

  let x = cc.randomMinus1To1() * 300;
  let y = cc.randomMinus1To1() * 300;
  newNode.setPosition(x, y);

  this.node.addChild(newNode);
}

スクリプト(コンポーネント)を含んだプレハブ生成

Spriteにマウス移動を追加したプレハブを生成

TestScene.ts

const {ccclass, property} = cc._decorator;

@ccclass export default class TestScene extends cc.Component {

    @property(cc.Prefab) prefab: cc.Prefab = null;
    @property(cc.Button) button: cc.Button = null;

    start () {
        // http://www.cocos2d-x.org/docs/creator/en/components/button.html?h=button
        this.button.node.on('click', (event) => {
            console.log('CLICK');
            this.onCreateAssets();
        });
    }

    update() { }

    onCreateAssets() {
        let newNode = cc.instantiate(this.prefab);

        // http://www.cocos2d-x.org/docs/creator/en/getting-started/quick-start.html?h=random
        let x = cc.randomMinus1To1() * 300;
        let y = cc.randomMinus1To1() * 300;
        newNode.setPosition(x, y);

        this.node.addChild(newNode);
    }
}

TouchComponent.ts

const {ccclass, property} = cc._decorator;

@ccclass
export default class TouchComponent extends cc.Component {
    isMouseDown: boolean;

    onLoad() {
        this.onMouseEventTest(this.node);
    }

    onMouseEventTest(node: cc.Node) {
        this.isMouseDown = false;

        node.on(cc.Node.EventType.MOUSE_DOWN, (event: cc.Event.EventMouse) => {
            this.isMouseDown = true;
            console.log('Mouse Down');
        });
        node.on(cc.Node.EventType.MOUSE_LEAVE, (event: cc.Event.EventMouse) => {
            this.isMouseDown = false;
            console.log('Mouse Leave');
        });
        node.on(cc.Node.EventType.MOUSE_MOVE, (event: cc.Event.EventMouse) => {
            if (this.isMouseDown) {
                console.log(event.getDelta());
                node.position = node.position.addSelf(event.getDelta());
            }
        });
        node.on(cc.Node.EventType.MOUSE_UP, (event: cc.Event.EventMouse) => {
            this.isMouseDown = false;
            node.color = cc.Color.WHITE;
            console.log('Mouse Up');
        });
    }
}