Unityちゃん (2D)を使用して、2Dゲームを作ってみる その2
前回設定を行ったpng画像を用いて、アニメーションを作成してみる。
前回の設定によって、一枚のpngの中に複数の画像が生成されているのが確認できると思う。
上記画像は、画像3つを選択したところ。 この選択した画像を、そのまま「Hierarchy」画面にドラッグすると、選択した画像を使用したアニメーションが自動で生成される。
上記ポップアップが表示されるので、場所と名前を設定して保存する。
作成されるのは2ファイル。AnimationとAnimator Controllerが作成される。
「Hierarchy」内に生成されたprefabを選択して、Animationウィンドウを開いて確認すると、以下のように表示される。
左から右に時間軸が表示され、キーフレームが菱形で表示されているのが分かると思う。 タイムライン上をダブルクリックすれば、キーフレームを追加することができる。
表示画像を切り替えたい場合は、「Inspector」ウィンドウから設定を行う。
このようにして、時間軸に沿って表示画像を切り替えていくことでアニメーションを実装する。 パラパラ漫画の原理と思えば良い。
Adobe Animateではフレームレートはファイル内で共通の値をとるが、Unityの場合は各Animationごとにフレームレートを設定できる。
画像の赤枠内に任意の数値を設定すれば、フレームレートとして反映される。 地味だが便利な機能だ。
次回は、今回生成したキャラクターをキー入力で移動させてみることにする。
Unityちゃん (2D)を使用して、2Dゲームを作ってみる その1
随分と間が空いてしまったが、その間に仕事内容は
ActionScriptによるPC用オンラインゲーム開発→Unityによるスマホ用オンラインゲームの開発(主にC#)→Unityのsyurikenを使用したエフェクト作成とjenkinsmを使用したビルドへのアセット反映
というように遷移し、現実に対処するのに精一杯の日々となった。
加えて、副業として行なっている講師としての仕事でも、本年度から本格的にUnityを扱うことになった。
なので、授業の準備を兼ねて、Unityちゃん(2D)を使用した2Dゲームの作成のサンプルをここに定期的に上げていきたいと思う。
使用環境は以下の通り
MacBookPro 2016
Unity5.5.2f1 Personal
■Unityちゃん素材ダウンロード
2017年3月現在で、以下のURLからダウンロード可能。
今回はUnityちゃん2Dのデータを使用する。
■素材に関する注意点
ダウンロードしたパッケージファイルをUnityにインポートして使用する。
インポートの方法は画面上部のメインメニューから「Assets」→「Import Package」→「Custom Package...」を選択して、パッケージファイルを選択する。
インポートすると、Project内の「Assets」以下に「UnityChan2D」というフォルダが作成される。
ちょっと確認すれば分かるのだが、実はこの中のデータはゲーム作成に必要な最低限の設定が完了している状態となっている。キー操作、アニメーション、物理演算と衝突判定、あたりがその内容。
それらの使い方に関しては、Project内の「Assets」→「UnityChan2D」→「Documents」内の「Introduction.pdf」に詳細が記載されており、その内容に沿って設定を行うだけでも簡単にゲーム作成ができるようになっている。
だが、ざっと内容を確認してみたのだが、用意されたファイルをそのまま使用してしまうと、残念ながらユーザー入力の受付や物理演算・衝突判定の実装方法、スプライトシートを使用したアニメーションの作成方法の基本部分に関して、あまり理解をせずに作業を進めることになってしまう。
なので、今回はプロジェクト内の「UnityChan.png」が一枚渡されたのみ、という状態から話を進めていきたいと思う。
ちなみに画像の場所は「Assets」→「UnityChan2D」→「Sprites」内となる。
■Spriteの設定
画像の設定だが、今回は一枚の画像から複数の素材を切り出して使用することになる。
なので、Project内でUnityChan.pngを選択したら、Inspector画面で設定を行う必要がある。
今回の設定内容は以下の通り。
「Sprite Mode」を「Multiple」にするのが必須。
この上で、「Sprite Editor」ボタンをクリックして、エディタを開いて設定を行う。
画面上でドラッグを行うことで、一枚の画像を分割することができる。
一枚一枚手作業で行うことも可能だが、今回は各スライスが64px*64pxで統一されているので、画面左上の「Slice」メニューから自動でスライスを生成することが可能だ。
ここまでで、素材の画像を使用する準備が整ったことになる。
次回は、アニメの作成を行う。
actionscriptのインターフェース
actionScriptにおいて
IWindow.as
function hoge():void;
HogeWIndow.as
public class HogeWindow implements IWindow
{
protected function hoge():void
{
//処理
}
}
と書くと、implementsされていないとエラーが出る。
小一時間悩んだが、結論としては、implementsするならpublic しか使えないとのこと。早く言えやそういうことは!
2013年にやりたいこと
ブログやってみたいって思ってたので、早速始めてみた。なので、まずは一個達成。
その他にやってみたいのは、
・出社せず、好きな場所で好きな時間に仕事が出来る人になる
・ガンプラを作る(エアブラシで塗装するところまで)
・プライベートでスマホアプリリリース
ってところでしょうか。