会員サイト

効果音の入ったシューティングゲームを作りましょう

簡単なシューティングゲームを作成します。いくつか効果音を入れて、臨場感を高めます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"FlyingSaucer“と名前を付けます。

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。

デザイン編集

Screen1のタイトルを"空飛ぶ円盤撃退"にします。

コンポーネントを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして、横幅は"親要素に合わせる"、高さは"80%"にします。次に同じドローイングとアニメーションパレットから、 画像スプライトコンポーネントを3個キャンバス1にドラッグアンドドロップして名前を"ロケット“、"円盤"、"爆発"にし、先ほどパソコンにダウンロードした画像のうち、rocket.pngをアップロードして"ロケット“の画像に、saucer.pngをアップロードして"円盤“の画像に、explosion.pngをアップロードして"爆発“の画像にそれぞれ設定します。他のプロパティは下のように設定してください。

	ロケット	円盤	爆発
目に見える	チェック	チェック	チェック
X	100	0	100
Y	240	0	0
有効	チェック	チェック	チェック
進行方向	0	180	0
インターバル	100	10	0
回転	チェックしない	チェックしない	チェックしない
スピード	0.0	2.0	0.0

レイアウトパレットから、水平配置コンポーネントをキャンパス1の下にドラッグアンドドロップし、その中にユーザーインターフェースパレットから5個のラベルをドラッグアンドドロップして横に並べます。デフォルトのラベルのテキストが長いので、作業中は水平配置コンポーネントの横幅を"親要素に合わせる"にして、ラベルのテキストを適宜短く変更する（"ラベル1のためのテキスト"を"ラベル1″に変更するなど）と楽です。左から順番に名前を"ラベル1“、"得点“、"ラベル2“、"残り時間“、"ステータス“、にします。そしてテキストを順番に"得点"、"0″、"残り時間"、"秒"、"ロケットを指で左右に動かして指を話すと発射できます"にします。ステータスだけはフォントサイズを10にします。

さらに、レイアウトパレットから、水平配置コンポーネントを"水平配置1″の下にドラッグアンドドロップし、その中にユーザーインターフェースパレットからボタンコンポーネントを配置します。"水平配置2″のプロパティで水平に整列するを"中央揃え"に横幅を"親要素に合わせる"にします。あとはボタンの名前をリスタートに、テキストもリスタートにします。

メディアパレットからサウンドコンポーネントを4個ビューアーにドラッグアンドドロップし、それぞれ発射音、爆発音、ハズレ音、ゲームオーバー音と言う名前にします。再生ファイルにlauncher7.mp3、 small_explosion1.mp3、 failure.mp3、 over.mp3の３個の音ファイルをアップロードして指定してください。ここまでで下図のようになります。

そのためにセンサーパレットからタイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマー間隔を1000ミリ秒に設定します。タイマー有効がチェックされていることも確認してください。

ブロック編集機能を使用したプログラミング

スマホのセンサーを使ったゲームを作りましょう

スマホらしく方位センサーを使ったゲームを作ります。スマホを傾けて紫色のボールをころがしてゴールにボールを入れて得点します。途中にあるブラックホールに落とさないようにうまくコントロールする必要があります。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"RollingBall“と名前を付けます。Screen1のタイトルを"ボールころがしゲーム"にします。

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。 このチュートリアルでは段階的にアプリの組み上げ、テストを繰り返してアプリを作っていきます。ここで行うように段階的に作っていく方がバグの少ないアプリを作れます。

ボール部分

まずは紫色のボールを動かす部分からです。

コンポーネントを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして名前を"フィールドキャンバス“にし、横幅は"親要素に合わせる"、高さは"70%"にします。次に同じドローイングとアニメーションパレットから、 画像スプライトコンポーネントをフィールドキャンバスにドラッグアンドドロップして名前を"ボール“にし、先ほどパソコンにダウンロードした3DPurpleBall.pngをアップロードして画像に設定します。他のプロパティは下のように設定してください。

• 有効：チェック
• インターバル：10
• 進行方向：０、この値はプログラム内で変更します
• スピード：0.0、この値はプログラム内で変更します
• 目に見える：チェック

さらにセンサーパレットから、 方位センサーをビューアーにドラッグアンドドロップします。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

方位センサーでボールを動かす

ブロック編集機能の左側にある方位センサー1パネルをクリックして開き、"いつも方位センサー1.方位が変化したら"ブロックをドラッグアンドドロップし、ボール.進行方向とボール.スピードに方位センサー1.角度と方位センサー1.マグニチュードを下図のようにはめ込みます。方位センサーの角度は-180～180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのマグニチュードは0～1の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。

ここまででテストしてみましょう。Companionアプリをつないで実際にスマホを傾けてボールが動くことを確認してください。うまく動きますか？

ゴール部分とテキスト部分

簡単なゲームを作りましょう

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"MoleMash"と名前を付けます。

デザイン編集

Screen1のタイトルを"もぐらたたき"にします。モグラの画像をここからパソコンにダウンロードします。

コンポーネントを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップします。その下にユーザーインターフェースパレットから、ラベルとボタンをドラッグアンドドロップします。

キャンバス1のプロパティの高さと幅を280ピクセルに変更し、ラベルは名前を"点数"にテキストを"点数:0″に設定します。ボタンは名前を"リセットボタン"にテキストを"リセット"に設定します。

さらにメディアパレットから、 サウンドコンポーネントをビューアーにドラッグアンドドロップします。非可視コンポーネントのサウンドコンポーネントを使ってモグラがたたかれた時にスマホをバイブレートさせます。

タイマーコンポーネントを追加

モグラは定期的にジャンプして位置を変えます。このためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を700ミリ秒に設定してこの間隔でモグラが動くようにします。タイマー有効がチェックされていることも確認してください。

画像スプライトを追加

画像スプライトを使ってモグラを描画します。画像スプライトはキャンバスの中を移動する画像です。画像スプライトには速さ、進行方向、インターバル（描画間隔）を指定でき、タッチされたかを検出することもできます。