ゲーム,チュートリアル

有名なブロックくずしゲームです

有名なゲームを作りながら、同じコンポーネントがたくさんあるときの、"すべてのコンポーネント“ブロックを使ったループ処理の仕方を学びます。

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

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

デザイン編集

Screen1のタイトルを"ブロック崩しゲーム"にします。

ダウンロードセクションからダウンロードした画像と音源をすべて、メディアのファイルをアップロードボタンをクリックしてアップロードします。

ブロックの配置

ドローイングとアニメーション パレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして、高さと横幅は"親要素に合わせる"にします。

画像スプライト を 5 個 “キャンバス1 “に追加し、それぞれの 画像プロパティblockgreen.png に設定します。以下のように X プロパティと Y プロパティを調整し、横一列に配置します:

  • X: 0, 68, 136, 204, 272
  • Y: 25

同様に、別の 画像スプライト を 5 個 “キャンバス1" に追加し、画像プロパティblockblue.png に設定。以下のように配置します:

  • X: 0, 68, 136, 204, 272
  • Y: 60

同じ手順で 画像スプライト を 5 個追加し、画像プロパティblockyellow.png に設定し、次のように配置します:

  • X: 0, 68, 136, 204, 272
  • Y: 95

ブロックを見やすくするために、"キャンバス1 “の背景色をライトグレーに変更します。ここまでの画面構成は、ブロックが3段に並び、各段がそれぞれの色で構成されます。

スコア表示とリスタートボタンの配置

レイアウト パレットから 水平配置コンポーネント を2個キャンバス1の下に追加します。1つ目は″水平配置1″、2つ目は″水平配置2″になります。

″水平配置1″に、ユーザーインターフェース パレットから ラベル を2つ配置し、"ラベル1“の テキスト を"得点"に、"ラベル2“の テキスト を"0″にします。″水平配置1″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。

″水平配置2″ユーザーインターフェースパレットからボタンコンポーネントを追加し、名前を"リスタート"、テキスト も"リスタート"にします。″水平配置2″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。

パドルとボールの配置

ドローイングとアニメーション パレットから 画像スプライト を1個"キャンバス1″の下中央にドラッグアンドドロップし、名前を"パドル"、画像プロパティblockwhite.png に設定します。

同じパレットから ボール コンポーネントを1つ追加し、名前を"ボール"、半径 を10に設定します。

サウンドの設定

メディア パレットから サウンド コンポーネントを2個追加し、それぞれ"当り音"、"ゲームオーバー音"という名前を付けます。

“当り音"の ソースhit.mp3 を、"ゲームオーバー音"の ソースover.mp3 を指定します。

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

ゲーム,チュートリアル

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

このチュートリアルでは、スマホで遊べるシューティングゲームを作成します。ロケットを指で動かし、指を離すと発射するシンプルな操作で、空飛ぶ円盤を撃退しましょう。効果音も加え、臨場感のあるゲームを完成させます。

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

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

デザイン編集

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

キャンバスとスプライトの配置

ドローイングとアニメーション パレットから キャンバス コンポーネントをビューアーにドラッグアンドドロップし、幅は"親要素に合わせる"、高さは"80%"に設定します。

ドローイングとアニメーション パレットから 画像スプライト コンポーネントを3個追加し、名前を"ロケット“、"円盤"、"爆発に設定します。先ほどパソコンにダウンロードした画像をアップロードして、以下のように画像を設定します。

  • ロケット:画像を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:テキスト="得点"
  • 得点:テキスト="0″
  • ラベル2:テキスト="残り時間"
  • 残り時間:テキスト="秒"
  • ステータス:テキスト="ロケットを指で左右に動かして指を離すと発射できます"、フォントサイズ=10

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

サウンドの設定

メディア パレットから サウンド コンポーネントを4個追加し、名前とソースを次のように設定します。

  • 発射音launcher7.mp3
  • 爆発音small_explosion1.mp3
  • ハズレ音failure.mp3
  • ゲームオーバー音over.mp3

センサー パレットから タイマー コンポーネントをビューアーにドラッグアンドドロップし、タイマー間隔を1000ミリ秒、タイマー有効をチェックします。

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

ゲーム,チュートリアル

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

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

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

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

ボール部分

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

コンポーネントの追加

ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグし、"フィールドキャンバス“と名前を付け、横幅は"親要素に合わせる"、高さは"70%"に設定します。

ドローイングとアニメーション パレットから画像スプライト を"フィールドキャンバス“に追加し、名前を"ボール“に設定します。ダウンロードした 3DPurpleBall.png をアップロードしてボールの画像として設定し、次のプロパティを設定します。

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

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

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

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

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

方位センサー1 パネルの"いつも方位センサー1.方位が変化したら"ブロックを追加します。

ボール.進行方向ボール.スピード にそれぞれ 方位センサー1.角度方位センサー1.マグニチュード を下図のように指定します。方位センサーの角度は-180~180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのマグニチュードは0~1の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。

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

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

ゲーム,チュートリアル

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

このチュートリアルでは、スマホで遊べる「もぐらたたき」ゲームを作成します。モグラがランダムに現れるので、タッチして得点を稼ぐシンプルなゲームです。

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

デザイン編集

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

コンポーネントの追加

ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグアンドドロップし、高さと横幅を280ピクセルに設定します。

ユーザーインターフェース パレットから ラベルボタン をキャンバス1の下に配置し、以下のように名前とプロパティを設定します。

  • ラベル:名前="点数"、テキスト="点数: 0″
  • ボタン:名前="リセットボタン"、テキス ="リセット"

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

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

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

画像スプライトの追加

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内