Akashic Engine でエンティティをクリックしたときにそのエンティティの色を変えるだけ

肉寿司がとても美味しかったので共有したいと思います。

概要

Akashic Engine で簡単なプログラムを作るの第二弾です。

前回はこちら

pickles-ochazuke.hatenablog.com

今回は、こんな感じのことをします。

エンティティをクリックしたら色が変わる。ただそれだけです。

したこと

今回は、前回よりも簡単かもしれません。

• エンティティを作る
• エンティティにクリックしたら、色が変わる処理を登録する

だけです。

エンティティを作る

generateBlock() という関数を用意し、そこにクリックしたら色が変わるエンティティを作る処理を書きます。

// クリックしたら色が変わるエンティティを作成する
function generateBlock(scene: g.Scene): g.E {
    const block = new g.FilledRect({
        scene: scene,
        cssColor: "#FF0000",
        width: 32,
        height: 32,
        touchable: true,
    });
    return block;
}

この関数は scene.loaded で以下のように呼び出しています。また、このエンティティをクリック可能にするために、touchable の値を true にしています。これをしないとエンティティがクリックされても検知できません（つまり、クリックしても何も反応しません）。

scene.loaded.add(() => {
    // 画面に表示するブロックを作る
    const rect = generateBlock(scene);

    // 画面の中央に来るようにする
    rect.x = g.game.width / 2;
    rect.y = g.game.height / 2;

    // シーンにエンティティを登録する
    scene.append(rect);
});

エンティティにクリックしたら、色が変わる処理を登録する

この処理は、generateBlock() で行います。

function generateBlock(scene: g.Scene): g.E {
    const block = new g.FilledRect({
        scene: scene,
        cssColor: "#FF0000",
        width: 32,
        height: 32,
        touchable: true,
    });

    block.pointDown.add(() => {
        // 色の状態を変化させる
        switch (block.cssColor) {
            case "#FF0000":
                block.cssColor = "#00FF00";
                break;
            case "#00FF00":
                block.cssColor = "#0000FF";
                break;
            case "#0000FF":
                block.cssColor = "#FF0000";
                break;
            default:
                block.cssColor = "#FF0000";
                break;
        }
        // これを実行しないと見た目が変わらない
        block.modified();
    });

    return block;
}

block.pointDown.add(...) が追加した処理です。pointDown がクリックしたときのイベントです。イベントはいろんな種類があり、scene.loaded もその一つです。他には、pointMove や pointUp があります。先にも書きましたが、イベントに処理を登録しても touchable を true にしないとここで登録した処理は行われません。

イベントの話は、公式ドキュメントにもあります。

akashic-games.github.io

今回はとても簡単な内容でしたが以上です。

コード全文

// クリックした対象の色を変えるプログラム
function main(param: g.GameMainParameterObject): void {
    const scene = new g.Scene({game: g.game});
    scene.loaded.add(() => {
        // 画面に表示するブロックを作る
        const rect = generateBlock(scene);

        // 画面の中央に来るようにする
        rect.x = g.game.width / 2;
        rect.y = g.game.height / 2;

        // シーンにエンティティを登録する
        scene.append(rect);
    });
    g.game.pushScene(scene);
}

// クリックしたら色が変わるエンティティを作成する
function generateBlock(scene: g.Scene): g.E {
    const block = new g.FilledRect({
        scene: scene,
        cssColor: "#FF0000",
        width: 32,
        height: 32,
        touchable: true,
    });

    block.pointDown.add(() => {
        // 色の状態を変化させる
        switch (block.cssColor) {
            case "#FF0000":
                block.cssColor = "#00FF00";
                break;
            case "#00FF00":
                block.cssColor = "#0000FF";
                break;
            case "#0000FF":
                block.cssColor = "#FF0000";
                break;
            default:
                block.cssColor = "#FF0000";
                break;
        }
        // これを実行しないと見た目が変わらない
        block.modified();
    });

    return block;
}

export = main;

Github にも公開しています。上記に載せたソースコードは src/main.ts にあります。

github.com