スポンサーリンク

Unity実習29、2Dゲームを作ってみよう

SnapCrab_NoName_2016-6-17_13-10-48_No-00.jpg

2Dの作り方とかはひよこでもやりました
復習しながらやって行きます

どんなゲームかというと

・敵が画面の上を飛び回りながら火の玉で攻撃してくる
・プレイヤーはマウスクリックした方に(左右)に移動
・火の玉に当たるとダメージ
・ライフ、得点、ゲームクリア、ゲームオーバーは無し
・解像度は854x480


弾よけゲーですね、にしても、スコアとかないんだ...

早速作ります
新規に、2Dモードでプロジェクトを作成
名前や保存場所は任意で
SnapCrab_NoName_2016-6-16_16-1-24_No-00.jpg

プロジェクトの設定
2DモードでUnityが起動したら、メインメニューのFile > Save Scene でSceneを保存、名前はMainGame
SnapCrab_NoName_2016-6-16_16-6-9_No-00.jpg

Gameビューのアスペクト比を 16:9 にします
SnapCrab_NoName_2016-6-16_16-10-37_No-00.jpg

テクスチャのインポート
ProjectのAssets内に UNIDARA_DATA/Data/Unity2DGame/Images フォルダをドラッグ&ドロップ
SnapCrab_NoName_2016-6-16_16-12-55_No-00.jpg

Project/Assets/Images/Background を選択、Inspectorで
Texture Type: Sprite(2D and UI)
Pixels To units: 100
Default>Format: Truecolor
に変更、Applyで反映させます
SnapCrab_NoName_2016-6-16_16-17-49_No-00.jpg

残りのEnemy,Field,Fire,Playerにも同じ設定をします
Spriteの説明についてはUnity実習10を参照して下さい

カメラの設定
HierarchyでMainCameraを選択、InspectorでTransformのPositionを(0,0,-10)に設定
Camera の項目で
Projection: Orthographic
Size: 2.4
に変更
SnapCrab_NoName_2016-6-16_16-26-4_No-00.jpg

ProjectでBackgroundの△を押して、生成されたスプライトデータを表示
SnapCrab_NoName_2016-6-16_16-29-33_No-00.jpg

スプライトデータをHierarchyにドラッグ&ドロップ
Inspectorで画像のようになっているか確認
SnapCrab_NoName_2016-6-16_16-30-44_No-00.jpg

同様に、FieldのスプライトデータもHierarchyにドラッグ&ドロップ
Inspectorが画像のようになっているか確認
SnapCrab_NoName_2016-6-16_16-36-20_No-00.jpg

SnapCrab_NoName_2016-6-16_16-36-10_No-00.jpg

SpriteRendererの項目はそれぞれ
・Sprite: 描画するスプライトデータを設定
・Color: 色合いの設定
・Material: 描画処理に使うマテリアルデータを設定
・Sorting Layer: スプライトの描画優先度

プレイヤーキャラクターの作成
Playerテクスチャには、一枚の絵に走っているキャラ6体と、ダメージを受けているキャラ1体が描かれています
これをそれぞれ切り出していきます
ProjectでPlayerテクスチャを選択、InspectorでSpriteModeを Multiple に変更
Applyで反映します
SnapCrab_NoName_2016-6-16_16-44-58_No-00.jpg

Inspectorにある Sprite Editor ボタンを押して、エディターを起動します
各種機能の説明
・エディターに表示されているテクスチャをドラッグすると範囲選択が出来、四角の中がスプライトになります
  ・誤って作成してしまった場合は、スプライトを選択し、キーボードの Delete を押すと消せます
・スプライトエリアを選択すると、右下にSprite情報編集ウィンドウが出ます
  ・スプライトの名前、サイズ、座標が表示され、左上の Trim を押すと透明部分を除いた自動範囲選択が可能
・右上のApplyでスプライトの設定を反映させます、Revertで元に戻ります
  ・他にもカラー表示や透明表示の切り替え、ズームなど
・左上のSliceを押すと、複数のスプライトを自動で切り出す編集メニューが表示されます
  ・Automatic: Sliceを押すと、透明部分を除いてスプライトを切り出し
    ・Grid by Cell Size や Grid by Cell Count にすると、スプライトがあらかじめ均等なパターンでレイアウトされます
  ・Minimum Size: 切り出すスプライトの最小サイズを設定
  ・Method: 切り出し方法の選択
    ・Delete existing: 作成済みのスプライトを削除してから自動切り出し
    ・Smart: 作成済みのスプライトの選択範囲を調整、新しいスプライトの切り出しも行います
    ・Safe: 作成済みのスプライトを調整せず、新しいスプライトの切り出しを行います
無題

実際に切り出していきます
エディターのSliceのメニューを画像のように設定
SnapCrab_UnityEditorInternalSpriteEditorMenu_2016-6-16_17-9-28_No-00.png

Sliceを押すと、自動で切りだされます
SnapCrab_NoName_2016-6-16_17-10-7_No-00.png
左上のかPlaye_0...となっていますが、選択して
Playe_run_0 ~ Player_run_5 に名前を変更
左下は、 Player_damage にします
変更したら右上の Apply を押して反映
エディターを閉じます
Prpjectビューでスプライトが増えているか確認します
SnapCrab_NoName_2016-6-16_17-15-51_No-00.jpg

Projectにある Player_run_0 をHierarchyにドラッグ&ドロップ
名前をPlayerにして
Playerが背景よりも手前に来るように設定していきます

PlayerのInspectorの SpriteRenderer にある Sorting Layer の項目
Defaultと書かれているところをクリックして、Add Sorting Layer を選択
Inspectorに Tags&Layers のメニューが表示されます

+を押してレイヤーを追加
Sorting Layer 1の項目を Character に変更
Defaultレイヤーより下において描画を優先させます
SnapCrab_NoName_2016-6-17_11-31-51_No-00.jpg

Playerの Sorting Layer を Character にします
SnapCrab_NoName_2016-6-17_11-33-29_No-00.jpg

背景より手前に表示されるようになりました
SnapCrab_NoName_2016-6-17_11-20-57_No-00.jpg

アニメーションを作る準備
ProjectビューのAssets内に Animations フォルダを新しく作成
SnapCrab_NoName_2016-6-17_11-37-2_No-00.jpg

メインメニューから Window > Animation を選択
アニメーションビューが表示されます
SnapCrab_NoName_2016-6-17_11-38-53_No-00.png

HierarchyのPlayerを選択
すると、アニメーションビューにCreateと出るので押します
SnapCrab_NoName_2016-6-17_11-40-53_No-00.png

押したらアニメーションクリップをどこに保存するかとウィンドウが出るので
~~Assets/Animationsフォルダを選択
名前をPlayerRun にして「保存」
保存に成功すると、アニメーションビューのの下が PlayerRun になります
ちなみに「アニメーションクリップ選択ボックス」と言うらしい
SnapCrab_NoName_2016-6-17_11-41-54_No-00.png

Projectビューには2種類のファイルが作成されています
SnapCrab_NoName_2016-6-17_11-42-54_No-00.jpg

PlayerのInspectorを見てみると、Anmatorが自動的に追加されています
SnapCrab_NoName_2016-6-17_11-46-31_No-00.jpg

移動アニメーションを作成
Animationの選択ボックスがPlayerRunになっていることを確認
隣のSample欄が 60 になっているかも確認
Add Property を押して、Sprite の + を押す
SnapCrab_Unity Personal (64bit) - MainGameunity - UNIDRA2D - PC Mac Linux Standalone DX11_2016-6-17_11-56-51_No-00

Player : Sprite プロパティが追加されます
を押して、キーフレームを追加できるようにします
SnapCrab_NoName_2016-6-17_11-57-22_No-00.jpg

キーフレームはタイムラインで赤線を設置したい場所に移動させてから、右クリックで Add Key を選択
キーフレームを設置したら、InspectorでSprite(赤くなっている場所)のスプライトを変更します
変更は、右の小さい○から
0:00フレーム:Player_run_0
0:05フレーム:Player_run_1
0:10フレーム:Player_run_2
0:15フレーム:Player_run_3
0:20フレーム:Player_run_4
0:25フレーム:Player_run_5
0;29フレーム:Player_run_5
SnapCrab_NoName_2016-6-17_12-4-40_No-00.png

無題

Animationビューの再生ボタン(▼)を押して動作を確認してみます


ダメージ中アニメーションの作成
「アニメーションクリップ選択ボックス」をクリックして、Create New Clip を選択
名前を PlayerDamage に変更
Assets/Animationフォルダ内に保存します
Sample欄を 60 に
Add Property > Sprite Renderer > Sprite の + を選択
キーフレームを
0:00 Player_damage
0:59 Player_damage
にします
SnapCrab_NoName_2016-6-17_12-29-40_No-00.jpg

アニメーションの遷移を作成
メインメニューから Windows > Animator を選択、Animatorビューを開きます
Projectにある Assets/Animation/Player を選択
ステートが表示されます
PlayerRun と PlayerDamage のステートがあるか確認してください
ない場合はProjectからドラッグ&ドロップして追加
SnapCrab_NoName_2016-6-17_12-36-2_No-00.jpg

PlayerRunがオレンジになっていない場合は、右クリックから SetAsDefault を選択

トリガーの追加
Parametersで+ > Trigger を選択
名前をDamageにします
SnapCrab_NoName_2016-6-17_12-37-43_No-00.jpg

Transitionを
Any State > PlayerDamage
PlayerDamage > PlayerRun
となるように繋げます
SnapCrab_NoName_2016-6-17_12-54-8_No-00.jpg

それぞれのInspectorで
Any State > PlayerDamage
Conditionsを+から追加して、Damageに
SnapCrab_NoName_2016-6-17_12-54-25_No-00.jpg

PlayerDamage > PlayerRun
何もしなくていい(ExitTimeはデフォルトのまま)
SnapCrab_NoName_2016-6-17_12-54-38_No-00.jpg

ゲームビューで動きを確認してみます
実行した後はキャラクターは走り続け、AnimatorビューのDamageをクリックすると、一定時間ダメージのアニメーションになって、再び走り出す
というようになっていれば成功です



キリもいいですし今回はここまで
次回は敵のアニメーションを作ります

もうね、暑くて
関連記事

Leave a Reply


管理者にだけ表示を許可する

Comment

Leave a Reply


管理者にだけ表示を許可する