カテゴリ

カテゴリ:enchant.js

カテゴリ:
はじめてのenchant.js その18の解答コードに、講義内で説明しきれなかった部分があるので捕捉をします。



(1)オブジェクトを半透明にする
スプライトを半透明にするには、

スプライト変数.opacity = 透明度

と書きます。透明度には0〜1までが指定でき、1に近づく程鮮明に見えるようになります。

(2)スプライトを拡大・縮小する
スプライトを拡大縮小するには、

スプライト変数.scalex = 横の倍率
スプライト変数.scaley = 縦の倍率

と書きます。
 

以上です。 

はじめてのenchant.js その18:爆風を追加する

カテゴリ:
今日はenchant.jsのアニメーションについて勉強します。まずは下の画像を見て下さい。

explosion

 

アニメーション画像が、連続で並んでいますよね。これは、96 x 96の画像を16枚並べたものです。これを以下のようなコードで読み込むことで、アニメーションさせることができます。
 

解説
(1)アニメーションフレーム変更
例題コードを見て、少し変だなと感じませんでしたか?読み込んだ画像ファイルのサイズは768 x 192なのに、どうしてスプライトのサイズは96 x 96なのでしょうか。こういう場合、スプライトは画像ファイルを自分の大きさで自動的に分割してくれます。分割した画像には、

explosion2



という感じで通し番号がつきます。スプライトのアニメーションフレームの変え方は

スプライト変数.frame = フレーム番号

と書きます。今回は爆風のアニメーションを実現したいので、1フレーム毎にアニメーションフレームを1加算するという処理を行います。 


(2)スプライトを削除する
スプライトを画面から削除するには、

シーン変数.removeCilhd(スプライト変数)

と書きます。 この命令を実行すると、スプライトが画面から見えなくなりますが、それはスプライト変数.visible = false ( その7 解説(4)参照 )と書く事と何が違うのでしょうか。この2つの違いをまとめると、以下のようになります。

①removeChildを使う
・スプライトが画面上から完全に消える
・爆風など、使い捨てのスプライトで使うと便利

②visible=falseを使う
・スプライトが見えなくなるだけで、画面上にずっと残り続ける
・visible = trueとやれば、再び見えるようになる
・プレイヤー、敵、ショットなど処理が何らかの条件で復活するスプライチで使うと便利


演習
敵が死んだ時に、爆風がでるようにして下さい。


解答
リンク先のgame.jsを参照して下さい。また、講義内で説明しきれていない箇所がありますが、その解説は補講を見て下さい。

https://github.com/kaidouji85/enchantJsHandsOn/tree/master/018_explosion

それでは、今日はここまで 

カテゴリ:
enchant.jsハンズオン for ビギナーズ用教材をブログ記事にまとめました。

課題1    スケルトンプログラムを作ろう
課題2    キャラクターを配置しよう
課題3    キャラクターを動かそう
課題4    画面外移動を防止しよう
課題5    敵キャラを作ろう
課題6    敵キャラを動かそう
課題7    敵とプレイヤーの当たり判定を作ろう
課題8    カーソルキー以外のボタンを押そう
課題9    ショットを動かそう
課題10   ショットの不具合を修正しよう
課題11   敵とショットの当たり判定をつけよう
課題12   敵とプレイターのあたり判定を修正
課題13   敵を関数化しよう
課題14   敵を量産しよう
課題15   ボタンを押した瞬間をとる
課題16   ショットを関数化する
課題17   ショットを量産する
課題18   爆風を追加する
課題19   プレイヤーの爆発エフェクト
 
 

このページのトップヘ

見出し画像
×