前回までのLTのサマリー

これまで、 加藤さんの写真に 頼りすぎだった。

父ちゃん、母ちゃん 俺、ゲームクリエイターになる！

※「俺」も「父ちゃん」も「母ちゃん」も普段使いません。

「マッチ3ゲーム」 同じ絵柄を3つ以上揃え消す シンプルなゲームルール

つくってみた

スマホアプリ作るまで続く 長期連載シリーズ

ってことで。

～ The road to a game developer #3～

プロトタイピングその3 「時間ねぇよ」

ネットプライスドットコム NPLab. いまい大すけ

ここまでの経緯

前回のプロトタイプ（表示＋消す）→リファクタリング→画像差し替え→JS高速化→テキスト排除（数字もグラフィック化）→ゲーム要素追加→画面エフェクト準備→え？tl.enchant.jsが便利？（いまここ）

例えば点数のポップアップthis.numberSprite.addEventListener(enchant.Event.ENTER_FRAME, function() { count++; if (count < 10) { this.y -= 4; } else if (count < 30) { this.y += 2; this.opacity = 1 - ((count - 10) * 0.1); } else { this.scene.removeChild(this); delete this; }});

最初の10フレームは上に移動

次の20フレームは下に移動しながら 徐々に消していく

処理終わったら消す

tl.enchant.jsなら

this.numberSprite.addEventListener(enchant.Event.ENTER_FRAME, function() { this.tl .moveBy(0, -40, 10, enchant.Easing.CUBIC_EASEOUT) .moveBy(0, 40, 20, enchant.Easing.CUBIC_EASEIN) .and() .fadeOut(20, enchant.Easing.CUBIC_EASEIN) .removeFromScene(); });});

あら便利。 しかもキレイ（Easing）。

Easing？

ふわっと、動かす。 シューッ、と動かす。 ぽよん、と動かす。

Easing ＜＞ Linear

見てみましょう。

（DEMO）

むしろわかりにくい…orz

今回使ってるところ。

（DEMO）

ゲームじゃなくても、 UIにおいても、

Easing使うとオサレ。

おまけ

ご清聴 ありがとうございました。