Tappy Plane (フラッピーバードクローン)の作り方
イントロダクション:
こんにちは、hyperPadで自分だけの「フラッピーバード」スタイルのゲームを作るためのチュートリアルへようこそ。
私たちのバージョンは少し違うので、Tappy Planeと呼んでいます。
このチュートリアルは、私たちのビヘイビアシステムを深く理解したい初心者のために作られています。また、ビジュアルコーディングについても学ぶことができます。チュートリアルを通して、hyperPadのインターフェースにも慣れていくことでしょう。
このチュートリアルでは、Flappy Birdスタイルのシンプルなゲームを作成します。ゲームプレイは、プレイヤーが画面をタップして飛行機を制御し、崖を避けながら上下に移動させることから成り立っています。各崖を通過するごとに1ポイントが与えられ、十分なポイントを獲得するとメダルを得ることができます。メダルの価値は、スコアが高くなるほど増加します。最高はキラキラの金メダルです！キラキラしたものが好きじゃない人なんていないですよね！？
まだhyperPadを持っていない場合は、App Storeからダウンロードできます: https://itunes.apple.com/app/apple-store/id886106438?mt=8
hyperPadの詳細については、私たちのウェブサイトをご覧ください: http://www.hyperpad.com
それでは、さっそく始めましょう！
パート1: 開始
プロジェクトの作成:
まず最初に、新しいプロジェクトを始める必要があります。hyperPadを読み込むと、プロジェクト画面が表示されるはずです。ここには、作成したすべてのプロジェクトと、ダウンロードしたプロジェクトが表示されます。今のところ、新しいプロジェクトを開始したいと思います。以下の画面の右上にある「新しいプロジェクト」ボタンをタップしてください。
これが終わると、ポップアップウィンドウが表示されるはずです。ここでプロジェクトの名前を付け、必要に応じてクラウドバックアップを作成します。また、「サンプルを使って始める」ボタンをタップすると、基本プロジェクトの1つをインポートできます。しかし、今のところはそれはしません。プロジェクトに「Tappy Plane」という名前を付け、次に「次へ」ボタンをタップしてください。
この新しい画面で、設計するデバイスとオリエンテーションを決定します。このプロジェクトでは、オリエンテーションを横向きに設定し、デバイスサポートをiPadに設定してください。後で何かを変更したい場合でも心配ありません。この設定は、グローバル設定メニューでいつでも調整できます。
最後に、どのタイプのゲームを作るかを選ぶことができます。現在、hyperPadは2種類のモード、トップダウンとサイドビューモードをサポートしています。トップダウンまたはバードアイビューは、通常、ゼルダの伝説が3Dに移行する前に使用されたり、Bejeweledのようなパズルゲームやトップダウンシューティングゲームなどで使用されます。サイドビューは、スーパーマリオブラザーズなどのプラットフォームゲームで一般的に使用されます。
どちらのバージョンも同じように機能しますが、一つだけ小さな違いがあります。バードアイビューでは重力設定が無効になっており（代わりに空気抵抗を利用して画面に向かう重力をシミュレートします）、プロジェクトを作成する際にはその点を考慮してください。これらの設定は後でグローバルプロパティメニューから変更することもできます。
このチュートリアルでは、サイドビューを使用しますので、その設定が選択されていることを確認してください。次に、重力設定とPTM比率があります。デフォルトでは、重力は0と-25に設定されます。
これらはxとyの値、または簡単に言うと、ゲーム世界の横方向と縦方向を表します。Xは横方向、すなわち左右を表し、Yは縦方向、すなわち上下を表します。0と-25のデフォルトは、物体が左右に引っ張られることはないことを意味し、25メートル毎秒の速度で落下することを意味します。このチュートリアルでは、デフォルト値のままで問題ありません。
PTM比率とは、ポイントとメートルの比率、つまり1 hyperPadメートルに対するピクセル（ポイント）の数です。デフォルトでは、32pt/mまたは32ピクセル毎メートルに設定されています。アートアセットを作成する際に知っておく必要があります。すべてのアートアセットはこのスケールに従う必要があります。このチュートリアルでは、hyperPadアセットライブラリから無料アセットを使用しますので、スケールを変更する必要はありません。
それでは、作成ボタンをタップして始めましょう！
エディター:
プロジェクトに入ると、次のような画面が表示されるはずです：
これがキャンバスで、ここでゲームを構築します。画面の中央に、薄い緑の箱のアウトラインが見えるはずです。これは画面ビューを表しています。この箱に配置されたものは、ゲームを開始すると直ちに視覚化されますが、外に置かれたものはレンダリングされません。もしよければ、次のステップに進む前に、好きなようにタップして動作を確認してみてください。
準備ができたら、右下の引き出しアイコンをタップしてアセットブラウザを開いてください。
アセットライブラリ:
ここが私たちのゲームのすべてのアセットが保存される場所です。デフォルトでは、hyperPadの新しいプロジェクトにはいくつかのスターターアセットが含まれています。自分のアセットをインポートするか、hyperPadアセットショップからパックをダウンロードする必要があります。このチュートリアルでは、hyperPadアセットショップから提供されたアセットを使用することに焦点を当てます。左側には4つのボタンがあるバーがあります。「アセット取得」ボタンをタップしてHyperpadショップを開いてください。
ここには、私たちhyperPadがプロジェクトを開始する際に役立つように設定した無料アセットパックがあります。Tappy Planeアセットパックを見つけてタップしてください。
ただ、単に「取得」ボタンをタップしてインポートを開始します（注意：エラーが発生した場合は、再度タップしてインポートを再開してください）。それが完了すると、アセットが正常にインポートされたというメッセージが表示されます。右上の「閉じる」をタップしてhyperPadに戻ってください。
そんな簡単です！アセットブラウザには「ダウンロード」という新しいフォルダーが表示されるはずです。タップするとTappy Plane Packフォルダーが表示され、その中にアートアセットが含まれています。
次に、ゲームの組み立てを始めましょう。
パート2: ゲームプレイ
フラッピーバードに慣れているなら、ゲームプレイスタイルにはすでに慣れているでしょう。画面をタップして鳥、つまり私たちのケースでは飛行機を空中に保ち、迫ってくる障害物に衝突しないようにします。これらの障害物はランダムに生成され、各プレイが前のプレイとは異なります。障害物をうまく避けるとポイントが与えられ、高得点が記録されます。
飛行機を追加:
基本的なゲームプレイを理解したので、始めましょう。最初にすることは、プレイヤーキャラクターを画面に表示することです。アセットブラウザに行き、ダウンロードフォルダーを開いてアートアセットを見つけてください。そこには「飛行機」というフォルダーがあるはずです。
公募のそのフォルダーを開き、好みの色を選択します。次に、最初の飛行機グラフィックを選択します。これによりアセットライブラリは閉じて、メインエディタ画面に戻ります。今、下のオブジェクトドックに飛行機が見えるはずです。このUI部分はオブジェクトドックと呼ばれ、使用した最後の5つのアセットが表示されます。飛行機をプレイエリアに入れるためには、オブジェクトドックからキャンバスにドラッグします。
これでゲームに飛行機が表示されるので、1つだけ調整が必要です。飛行機をタップして選択し、右側のプロパティタブを開きます。今、飛行機を通過可能な壁オブジェクトに設定します。簡単です。通過可能スイッチを見つけて、タップしてオンに切り替えます。これを行う理由は、プレイヤーがゲームを開始する前に飛行機が落下してしまわないようにするためです。また、現時点では衝突が発生しないようにするために通過可能に設定します。
これで、飛行機をプレイ可能にする方法に進みましょう。
落下する飛行機:
ゲームを開始する方法が必要です。それを実現するためにボタンが必要です。シンプルなグラフィックを使用してタップ場所を示すこともできますが、私たちのゲームではプレイヤーが画面のどこでもタップできるようにしたいと思います。どうやってこれを実現するか？画面全体をボタンにします！
これを実現するために必要な最初のことは、新しいレイヤーを作成することですが、そのためには飛行機の選択を解除する必要があります。解除するには、空いている場所をタップしてください。選択解除されると、オブジェクトプロパティが閉じ、右側にレイヤータブが表示されるはずです。表示されない場合は、指を右側から左側にスワイプしてそれを表示させてください。
現在のところ、デフォルトでは3つのレイヤーがあります。グローバルUI、シーンUI、そしてMainの後に分離線が表示されます。グローバルUIレイヤーにあるものは、ゲームのすべてのシーンに表示されます。他のすべてのレイヤーは、それぞれの個別のシーンに特有のものです。新しいレイヤーを作成するには、レイヤータブの下部にある+アイコンをタップします。これにより、新しいレイヤーの名前を付けるプロンプトが表示されます。「Button」と入力してOKを押します。
デフォルトで、アクティブなレイヤーは新しく作成したレイヤーに切り替わります。レイヤーを使用する場合、アクティブなレイヤー内のオブジェクトのみが選択できます。ゲームを構築しているときに、意図しないオブジェクトを移動させてしまわないように整理するのに役立ちます。現在作業中のレイヤーを常に把握しておくことを忘れないでください。また、他のレイヤーの上に配置されたレイヤーは、そのレイヤーの上に表示されることに注意してください。このようにして、背景がゲームエリアを覆うことを回避できます。
それでは、ボタンを作成するのは非常に簡単です。右下のオブジェクトドック内の特殊オブジェクトボタン（ビーカーアイコン）をタップします。これにより、オブジェクトの作成メニューが表示されます。私たちは空のオブジェクトが必要です。タップすると、プロジェクトの中央に小さな空の四角が作成されます。しかし、これを画面全体に広げたいと思います。四角の内部をタップして選択します。