コピペで脱出ゲームを作る~しばらく待つとヒント等が出てくるあれ~

こんにちは第15回開始です

前回までで脱出ゲームでやることならだいぶできるし何をしようかと迷ったのですが
今までやってなかったことということでアニメーション的なことをやろうと思いました
ということでしばらく待つとヒント等が出てくるあれ開始です
そんなわけで今回はtl.enchant.jsというものを使います
アニメーション的なことをするためのものです、プラグインは追加しないでも使えます

私が製作中の脱出ゲームでは使わない予定なので別口で作ってみました
さっそくコード見ちゃってください
スポンサードリンク


やたら長いですが実は改行しているところは改行しないでもできます
見やすい感じにしてください

今回は視点変更して5秒したら葉っぱが右左右右左左左の順番で落ちてくるアニメーションです
まずtl.enchant.jsの使い方は○○ . tl . ××と記述するだけです
○○はSpriteとかlabel、sceneなどの名前、××が命令各種です

命令各種はググってください
今回はdelay・moveTo・thenとclearしか使っておりません
他にも拡大・縮小したり回転させたり透明にしたり複数の処理を同時に行ったり複数のものを同時に動かしたりイージング使ったりetcetcできますがその辺はググってください

ということで使ったものだけ軽く説明しましょう
まず.delay() こちらはなにもしないで間を空けるものです
()の中はフレーム数です、今回は15fpsですので75は5秒になります

続いて.moveTo()、こちらは指定座標に指定されたフレームかけて移動する命令です
()内はx、y、フレームとなります

そして.then(function(){ });、こちらは{}内の関数を実行するということです
関数というのは要するに今までやってきたことです
いろいろぶち込めるので試してみてください

最後に .clear()です、こちらは処理をとめるものです
今回の場合これを矢印のontouchendに入れておかないと途中で視点変更したときにそのまま動き続けてしまいます
葉っぱ自体はvisible=falseなので見えませんが、元の場所に戻ると動いています
そしてアニメーションが止まると葉っぱはその場に止まってしまうので初期の位置に戻しています

と、こんな感じです
同じことを繰り返しているので長い割りに簡単ですね
ということで出来上がりがこちら

クリックしたら白バックに矢印の画面、矢印をクリックしたら黒バックでアニメーションが始まります

確認として最後まで見て(右左右右左左左)しばらく待ってもループしないこと
最後まで見て視点変更してまた戻ったとき最初から始まること
アニメーション中に視点変更してからまた戻ったとき最初から(待ち時間から)始まること
等確認してください

今回はここまで、お疲れ様でした
スポンサードリンク

関連記事
スポンサーサイト

Comment

Comment Form
公開設定

Trackback


→ この記事にトラックバックする(FC2ブログユーザー)