ブロック崩しに点数が出るようになって少し形が出来上がってきました。
このブログは僕の勉強と同時進行でやっていますので、まだまだ足りないところがあります。
次は効果音を!と思ったのですが、まず先に操作性が気になりました。
やっぱりキーボードよりマウスで操作したい。
Behaviorにそれらしいのがあるのでちょっと実装してみましょう。。
ちなみに、bar(自機)に実装されているBehaviorは現在この2つです。
Add Behaviorを押します。
Controlsの中に、Follow the Mouseがあります。
これがそれっぽい感じです。
項目はこんな感じですね。
とりあえずそのままで、いきましょう。
Test Game!
あれ?
マウスについてくるのはいいけど
上にも動く・・・。
こりゃだめだ。
2 Way Horizontal Movementが効いて上には動かないようになる予定だったのですが、ダメみたいです。
2 Way Horizontal Movementは不要なので消しちゃいます。
Remove Behaviorで消去します。
Follow the Mouseの中がどうなっているのか覗いてみましょう。
選択した状態でEdit Behaviorを押下。
なるほど、少しだけわかりました。
どうもset Distance Y・・・の部分が縦方向の移動に関係しているようです。
これを消してみようかな。
set Distance Y・・の下を切り離して
さらに切り離します。
set Distance Y・・・は要らないのでゴミ箱へポイ。
元通りにつなげておきます。
Test Game
やった!左右にだけ動きました。
でも、なんだかもったりした動きです。
これは直したい。
設定を見直してみましょう。
●Speed→マウスに追従するスピードですね。
100にしてみます。
●Margin→マウスポインタと自機の離れ具合に余裕をどれくらい持たせるかという設定。初期値は0ですが、ブルブル震えたりするので、10くらいにしました。
●Easing→チェックを入れると、マウスポインタと自機の離れ具合によって、自機の移動速度が変わります。離れている程、早く移動し、近い時はゆっくり移動します。
●Minimum Easing Speed→Easingにチェックを入れた時だけ機能します。ゆっくり移動する時に、どれくらい遅くするかの最小値を決めます。
いろいろな数字を入れて試してみてください。
Stencylの使い方を研究するブログ
Stencylはファミコンなどでおなじみの平面的なゲームを作成するツールです。 無償版のインストールでもAdobe社のFlash形式のファイルを作成することができます。
2014年10月26日日曜日
2014年10月25日土曜日
Stencyl 点数を表示してみよう!
前回、ゲーム画面に文字を表示させる方法を紹介しました。
ここからは、更に一歩進めて、画面に点数を表示してみましょう。
まず、そのためには簡単な準備が必要になります。
上のメニューにあるSettingsを押下してください。
こんな画面が出ます。
左に並ぶアイコンからAttributesを選んでください。
するといつものClick hereが出ますので
クリックします。
Nameに適当な名前を入力します。
今回はscoreにしました。
その他の項目は変更しなくてもOKです。
ちなみにInitial Valueに設定した数値が、scoreの初期値になりますので、例えば点数を10000点から始めたい場合は、ここに10000と入れます。
なぜこのような準備が必要かというと、ブロックを破壊する毎に点数が加算されていくわけですが、その点数を表示する前に、一旦保存しておく入れ物が必要になるからです。TypeのところがNumberになっていますが、今回に設定によってscoreという入れ物にNumber(数値)が入れられるようになったというわけです。
ではOKで進めましょう。
左図のようになれば完了です。
前回のおさらいも兼ねつつ、Brakeoutの文字を表示するブロックの下に、同じパーツをくっつけてみてください。
できましたか?
この部分にscoreを表示します。
draw textの後の空白を選択してみてください。
左図のようにNumber→Game Attributesからscoreを選択します。
表示する位置ですが、yに30を入れて少し下にずらします。
Test Sceneしてみましょう。
scoreは出てきましたが、0のまま増えません。
どうしてでしょうか?
ブロックを破壊した後にscoreに点数を加算する仕組みを作ってないからですね。これではいつまでたっても0のままです。
さて、どうしたものか・・・。
ブロックを破壊する時の処理に戻ってみましょう。
ブロックのBehaviorsには、以前設定したDie On Collition・・・があります。
これがブロックを破壊する役割を担っています。
ちょっとこの中を詳しく覗いてみましょう。
右上にEdit Behaviorというボタンがあるので押してみます。
こんなブロックが出てきました。
When以下に記載されている条件を満たした時に、kill Selfという事で、自分自身を破壊する仕組みになっているようです。
という事は、自分自身を破壊する前に、scoreに数値を加算すればいいのではないでしょうか。
Attributesの項目を選択すると、set score toというブロックが見つかりました。
これを使いましょう。
kill Selfの上にくっ付けて、空白をクリックします。左図のようにMath→0+0を選択しましょう。
左側はscoreのブロックを入れて(やり方は先ほどやった方法と同じです)、右側に加算したい点数を直接入力します。
なぜこのようなことをするのかというと、set score to 10だと、ただ10を何度も入れるだけで、増えていかないからです。図のようにすることでscoreに10を加えるという仕組みになります。
Test Sceneすると、ブロックが壊れる毎に10点入るようになりました!
ここからは、更に一歩進めて、画面に点数を表示してみましょう。
まず、そのためには簡単な準備が必要になります。
上のメニューにあるSettingsを押下してください。
こんな画面が出ます。
左に並ぶアイコンからAttributesを選んでください。
するといつものClick hereが出ますので
クリックします。
Nameに適当な名前を入力します。
今回はscoreにしました。
その他の項目は変更しなくてもOKです。
ちなみにInitial Valueに設定した数値が、scoreの初期値になりますので、例えば点数を10000点から始めたい場合は、ここに10000と入れます。
なぜこのような準備が必要かというと、ブロックを破壊する毎に点数が加算されていくわけですが、その点数を表示する前に、一旦保存しておく入れ物が必要になるからです。TypeのところがNumberになっていますが、今回に設定によってscoreという入れ物にNumber(数値)が入れられるようになったというわけです。
ではOKで進めましょう。
左図のようになれば完了です。
前回のおさらいも兼ねつつ、Brakeoutの文字を表示するブロックの下に、同じパーツをくっつけてみてください。
できましたか?
この部分にscoreを表示します。
draw textの後の空白を選択してみてください。
左図のようにNumber→Game Attributesからscoreを選択します。
表示する位置ですが、yに30を入れて少し下にずらします。
Test Sceneしてみましょう。
scoreは出てきましたが、0のまま増えません。
どうしてでしょうか?
ブロックを破壊した後にscoreに点数を加算する仕組みを作ってないからですね。これではいつまでたっても0のままです。
さて、どうしたものか・・・。
ブロックを破壊する時の処理に戻ってみましょう。
ブロックのBehaviorsには、以前設定したDie On Collition・・・があります。
これがブロックを破壊する役割を担っています。
ちょっとこの中を詳しく覗いてみましょう。
右上にEdit Behaviorというボタンがあるので押してみます。
こんなブロックが出てきました。
When以下に記載されている条件を満たした時に、kill Selfという事で、自分自身を破壊する仕組みになっているようです。
という事は、自分自身を破壊する前に、scoreに数値を加算すればいいのではないでしょうか。
Attributesの項目を選択すると、set score toというブロックが見つかりました。
これを使いましょう。
kill Selfの上にくっ付けて、空白をクリックします。左図のようにMath→0+0を選択しましょう。
左側はscoreのブロックを入れて(やり方は先ほどやった方法と同じです)、右側に加算したい点数を直接入力します。
なぜこのようなことをするのかというと、set score to 10だと、ただ10を何度も入れるだけで、増えていかないからです。図のようにすることでscoreに10を加えるという仕組みになります。
Test Sceneすると、ブロックが壊れる毎に10点入るようになりました!
2014年10月23日木曜日
Stencyl 文字を表示してみよう! その2
前回は、文字を表示する時に使用するフォントを設定してみました。
これで準備は整いました!
さっそく文字を表示してみましょう。
・・・と言っても、ActorのようにTextを表すような項目は見当たりません。
さて、どうしたものか。
残念な事に、Stencylには日本語の解説サイトというものがありません。公式サイトやYoutubeのチュートリアルを見て、英語をなんとか翻訳しながら自分なりに調べてみました。
まず、文字をどこに表示したいか?
といえばSceneです。
という事で、Scenesから、これまで作ったMainのSceneを開きます。
そしてEventsを選択します。
このような画面になりました。
おや?良くわからないけど、何となくプログラミングをするような画面が出てきたぞ・・・と思うかもしれませんが、その通りです。
ちょっと拒絶反応が出た方もいるかも知れませんが、とりあえず続けてみてください。
そんなに難しい話はしません。
初めに、Add Event(イベント追加)を押します。
すると下にリストが出てきます。
そうしたら、Basics→When Drawingを選択します。
なぜWhen Drawingを選択するのか?という説明については、今後機会があったら詳しく調べて解説したいと思います。
すると、こんなのが出てきます。パズルのピースみたいな感じですが
この欠けた所に命令が書かれたパーツをはめていくんです。
はめるパーツは右側に並んでいます。
ActorとかSceneとか見慣れたものがありますね。
上に並んでいるActorなどが大項目で、Position、Motion等のボタンが中項目となっており、下に 並んでいるパーツが項目に応じて入れ替わるようになっています。
Drawingを選んでみましょう。
お、ちょうど良さそうなパーツがありますね。
draw text anyting・・・
を選んで、左の方にドラッグしていきます。
こんな風に・・・
ピッタリはまりました。
そうしたら表示したい文字と位置を直接入力します。
ちなみに、日本語表示に対応していならしく、アルファベットや数字しか入りません。
位置は、Xが横位置、Yが縦位置です。
X、Yともにゼロだと左上に文字が出ます。
さっそくテスト!
あれ?出てきません。
調べた結果、フォントを指定しないとダメだという事がわかりました・・・そりゃそうか。
中項目のStylesを見ると、set current font・・・がありますので、これをドラッグしていきます。
こんな風に
ガシャン!
次に、Fontの部分をクリックして
前回作成したフォントを選択!
これでよし。
再び、Test Scene!
できた!
と、今回はここまで。
これで準備は整いました!
さっそく文字を表示してみましょう。
・・・と言っても、ActorのようにTextを表すような項目は見当たりません。
さて、どうしたものか。
残念な事に、Stencylには日本語の解説サイトというものがありません。公式サイトやYoutubeのチュートリアルを見て、英語をなんとか翻訳しながら自分なりに調べてみました。
まず、文字をどこに表示したいか?
といえばSceneです。
という事で、Scenesから、これまで作ったMainのSceneを開きます。
そしてEventsを選択します。
このような画面になりました。
おや?良くわからないけど、何となくプログラミングをするような画面が出てきたぞ・・・と思うかもしれませんが、その通りです。
ちょっと拒絶反応が出た方もいるかも知れませんが、とりあえず続けてみてください。
そんなに難しい話はしません。
初めに、Add Event(イベント追加)を押します。
すると下にリストが出てきます。
そうしたら、Basics→When Drawingを選択します。
なぜWhen Drawingを選択するのか?という説明については、今後機会があったら詳しく調べて解説したいと思います。
すると、こんなのが出てきます。パズルのピースみたいな感じですが
この欠けた所に命令が書かれたパーツをはめていくんです。
はめるパーツは右側に並んでいます。
ActorとかSceneとか見慣れたものがありますね。
上に並んでいるActorなどが大項目で、Position、Motion等のボタンが中項目となっており、下に 並んでいるパーツが項目に応じて入れ替わるようになっています。
Drawingを選んでみましょう。
お、ちょうど良さそうなパーツがありますね。
draw text anyting・・・
を選んで、左の方にドラッグしていきます。
こんな風に・・・
ピッタリはまりました。
そうしたら表示したい文字と位置を直接入力します。
ちなみに、日本語表示に対応していならしく、アルファベットや数字しか入りません。
位置は、Xが横位置、Yが縦位置です。
X、Yともにゼロだと左上に文字が出ます。
さっそくテスト!
あれ?出てきません。
調べた結果、フォントを指定しないとダメだという事がわかりました・・・そりゃそうか。
中項目のStylesを見ると、set current font・・・がありますので、これをドラッグしていきます。
こんな風に
ガシャン!
次に、Fontの部分をクリックして
前回作成したフォントを選択!
これでよし。
再び、Test Scene!
できた!
と、今回はここまで。
登録:
コメント (Atom)








































