actionScript書きの日記

アラフォーFlashデベロッパのブログ。actionscriptやobjective-cを経て、現在はUnity、Spine、AfterEffectsがメイン。

Unityちゃん (2D)を使用して、2Dゲームを作ってみる その1

随分と間が空いてしまったが、その間に仕事内容は

 

ActionScriptによるPC用オンラインゲーム開発→Unityによるスマホ用オンラインゲームの開発(主にC#)→Unitysyurikenを使用したエフェクト作成とjenkinsmを使用したビルドへのアセット反映

 

というように遷移し、現実に対処するのに精一杯の日々となった。

加えて、副業として行なっている講師としての仕事でも、本年度から本格的にUnityを扱うことになった。

なので、授業の準備を兼ねて、Unityちゃん(2D)を使用した2Dゲームの作成のサンプルをここに定期的に上げていきたいと思う。

使用環境は以下の通り

 

MacBookPro 2016

Unity5.5.2f1 Personal

 

■Unityちゃん素材ダウンロード

2017年3月現在で、以下のURLからダウンロード可能。

unity-chan.com

今回はUnityちゃん2Dのデータを使用する。

 

■素材に関する注意点

ダウンロードしたパッケージファイルをUnityにインポートして使用する。

インポートの方法は画面上部のメインメニューから「Assets」→「Import Package」→「Custom Package...」を選択して、パッケージファイルを選択する。

 

f:id:goodbyegirl1974:20170326204711p:plain

 

インポートすると、Project内の「Assets」以下に「UnityChan2D」というフォルダが作成される。

ちょっと確認すれば分かるのだが、実はこの中のデータはゲーム作成に必要な最低限の設定が完了している状態となっている。キー操作、アニメーション、物理演算と衝突判定、あたりがその内容。

それらの使い方に関しては、Project内の「Assets」→UnityChan2D」→「Documents」内の「Introduction.pdf」に詳細が記載されており、その内容に沿って設定を行うだけでも簡単にゲーム作成ができるようになっている。

だが、ざっと内容を確認してみたのだが、用意されたファイルをそのまま使用してしまうと、残念ながらユーザー入力の受付や物理演算・衝突判定の実装方法、スプライトシートを使用したアニメーションの作成方法の基本部分に関して、あまり理解をせずに作業を進めることになってしまう。

なので、今回はプロジェクト内の「UnityChan.png」が一枚渡されたのみ、という状態から話を進めていきたいと思う。

ちなみに画像の場所は「Assets」→「UnityChan2D」→「Sprites」内となる。

f:id:goodbyegirl1974:20170326204733p:plain

 

■Spriteの設定

画像の設定だが、今回は一枚の画像から複数の素材を切り出して使用することになる。

なので、Project内でUnityChan.pngを選択したら、Inspector画面で設定を行う必要がある。

今回の設定内容は以下の通り。

f:id:goodbyegirl1974:20170326205114p:plain

「Sprite Mode」を「Multiple」にするのが必須。

この上で、「Sprite Editor」ボタンをクリックして、エディタを開いて設定を行う。

f:id:goodbyegirl1974:20170326205306p:plain

画面上でドラッグを行うことで、一枚の画像を分割することができる。

一枚一枚手作業で行うことも可能だが、今回は各スライスが64px*64pxで統一されているので、画面左上の「Slice」メニューから自動でスライスを生成することが可能だ。

 

ここまでで、素材の画像を使用する準備が整ったことになる。

次回は、アニメの作成を行う。