Unityで2Dゲーム開発(5)〜スプライト表示〜

今回、例としてスプライトアトラスにしたのは、トランプゲームに使うカードです。カードはあるときは表、あるときは裏というように状況によってその姿を変えます。
これを実現するためにアニメーションスプライトのフレームセットを利用します。

まずAssets > Orthello > Objects > Sprites のAnimationをHierarchyタブへドラッグアンドドロップします。
するとOT配下のAnimationsにAnimationが生成されます。

(前回生成したコンテナもそうですが、生成されたオブジェクトの名前を変更することができます。この例ではコンテナ”Container (id=xxxx)”もアニメーション”Animation (id=xxxx)”も”cards”という名前に変更します。)

Animationsに作成された”cards”を選択し、inspectorタブ内の設定を以下のようにします。

これで、裏面表示”reversed”とクラブのエースの設定ができます。

次に先ほど設定したAnimationを提供するスプライトを作成します。
Assets > Orthello > Objects > Sprites のAnimatingSpriteをHierarchyタブへドラッグアンドドロップします。

今回は、”Animating Sprite(id=xxxx)”を”card”に名前変更します。

この”card”を選択し、Inspectorタブ内の「Sprite Containe」に以前作成したSprite Atlas “cards”、また、「Animaition」にAnimation “cards”を設定します。また、ゲーム開始時にアニメーションがスタートしてしまわないように、そのした方にある「Play On Start」のチェックを外します。
また、「Physics」を”Custom”に変更しておきます。(ここを初期値の”Trigger”にしておくとアニメーションが開始するたびに位置がリセットされてしまいます。)



ここまででスプライトの設定が完了です。
では、スプライトを表示させてみましょう。
Gameタブを選択し、上部の開始ボタンをクリックします。すると開始ボタンが青に変化し、
Gameビューにカードが表示されます。

スプライトの表示はこのようにして実現できます。
ゲームとして最低限動作させるには、このスプライトに対してスクリプトをつけ、スプライトの動作を記述必要があります。
次回はスクリプトについて説明したいと思います。

Unityで2Dゲーム開発(4)〜スプライトアトラス設定〜

スプライトアトラスはスプライトが複数集まったもの、という理解で良いと思います。
(アトラスには地図帳というような意味があり、マップが地図、地図が沢山集まったものがアトラスのようです。)

スプライトアトラスを作成するのに使えるツールがあります。
Texture Packer」です。
スプライトの元となる画像をドラッグアンドドロップしていくだけで所望のファイルが手に入ります。
次のような手順で作業します。

まず、「TextureSettings」フレーム内の「Layout」にて、

  • 「Algorithm」:Basic
  • 「Trim mode」:None
  • 「Enable auto alias」:チェックしない

初起動時のデフォルト設定のままだと出力される画像ファイルに「ライセンス買ってね」的なメッセージが載ってしまいます。
上記設定にすることで、無料版でも今回の作業については問題なく利用できます。

そして、同フレーム「Output」にて、

  • 「Data Format」:cocos2d

と設定し、「Publish」ボタンをクリックし、保存場所を指定し、ファイルを出力します。
(本例では、cards.pngおよびcards.plist)

出力されるファイルのうち.plistファイルの拡張子を.plistから.xmlに変更しておきます。(Orthelloで利用するため)

「Texture Packer」の出番はここまでです。

次に
Unity側で「Texture Packer」から出力されたファイルを取り込む作業をおこないます。

取り込み先を作成します。例えば今回はAssetsの下に「SpriteAtlas」という名前で作成し、そこにファイルを置きます。
すると、このようになります。

cards.pngを選択し、inspectorタブに情報を表示させます。
その中の「Override for Web」をチェック、「Format」をTryecolorに設定します。

Assets > Orthello > Objects > Sprites > SpriteAtlas-Cocos2D
をHierarchyタブへドラッグアンドドロップします。

するとHierarchyタブ内をOT > Containersと展開するとContainerが生成されています。このContainerを選択し、inspectorを表示し、OTSprite Atlas Cocos 2D(Script)のTextureへSpriteAtlases内のcards.pngをドラッグアンドドロップします。
するとこのようになります。

ここまでで、スプライトアトラスについて設定ができました。
つぎは実際にスプライトを表示させます。

Unityで2Dゲーム開発(3)〜Orthello設定〜

続きです。

Orthelloの設定を行います。

まず、シーンにOrthello提供のプレハブを設置します。
SceneビューまたはHierarchyビューへプロジェクト内のAsset > Orthello > Ojects 内にある OT をドラッグします。

次にHierarchyビューでOTを展開し、[View]を選択、
[Always Pixel perfect]にチェック、
[Pixel Perfect Resolution]に854×480(Player Settingsで設定した内容)
[Custom Size] 240

[Custom Size]の240はCubeオブジェクトがスケール通り表示されるかどうかを調整しながら設定します。
[GameObject]->[Create Other]->[Cube]でCubeを追加し、それによってHierarchyビューに追加された[Cube]を選択します。
Cubeの[Transform][Scale]をX:854、Y:480に設定し、Gameビューで見たときにCubeが画面にぴったり収まるように[Custom Size]を調整します。(Gameビューは一旦違うビューに切り替えないと正しく更新されません。)

結果、240という値に辿り着いています。(設定がCubeは削除してください。)

ここまでの作業で作成されたプロジェクトは2Dゲームのプロジェクトテンプレートとして使うことができます。(プロジェクト名だけは変えることになりますが。)

それでは、2Dゲームにおけるスプライトの表示に入っていきましょう。

Unityで2Dゲーム開発(2)〜プロジェクト設定〜

続きです。

ビルド設定を行います。
[File]->[Build Settings…]

まず、どのプラットフォームで動かすかを設定します。Android、iPhone、PCなど随時設定変更可能ですが、開発初期段階はWeb Playerで動作確認していきなが進め行けば良いでしょうから、[Web Player]を選択し、[Switch Platform]を押下することで設定されます。

さらに[Switch Platform]横の[Player Settings…]でプレイヤーの設定を行います。
[Resolution and Presentation]の[Resolution]で解像度を設定します。
今回はスマホで多い、横854x縦480に設定します。

つぎはレンダリング設定です。
照明を調整するため、[Edit]->[Render Settings]で[Ambient Light](周囲光、環境光)の色指定を255,255,255,255の白設定にします。

つぎはOrthelloの初期設定です。

Unityで2Dゲーム開発(1)〜プロジェクト作成〜

以前、Android、iPhone両プラットフォーム用のアプリケーション開発において、Javascriptコード一本で開発できるTitaniumを開発環境として選択しました。そのアプリケーションが2Dゲームだったこともあり、Titanium上で使える2Dゲームエンジンモジュール「quicktigame2d」を使っていました。
この環境でしばらくはうまく進んでいたのですが、パーティクルを実装する段階でquicktigame2dではAndroidのみ非対応、ということに気がつきました。
元々Widowsでパーティクルを自前で実装したこともあるので要領は分かるのですが、やっぱり有りものを使う方がいいということで、

  • quicktigame2dの後継、LanicaのPlatinoのリリースを待つ
  • やっぱりUnityにする

のどちらかに。
とはいえ、Platinoがいつになるのかさっぱりわからないので、Unityで始めてみることにしました。

ということで、まずは
Unity4入門 最新開発環境による簡単3Dゲーム製作

を読んで大枠を理解しました。非常に分かりやすく、これからのUnityでの開発モチベーションを上げてくれた良書です。

理解したことを踏まえつつ、まずは、プロジェクト作成から。

[File]->[New Project…]
でプロジェクト名を決めてプロジェクトを作成します。

Projectビューで「Scene」という名前のフォルダを作成し、[File]->[Save Scene as…]で現在のシーンを保存します。ひとまずゲームに必ずあるタイトル画面のシーンを想定し、「Title」と名付け、先ほど作成した「Scene」の下へ保存します。
すると、Projectビュー上では

こんな感じに見えていると思います。

次にUnityで2Dゲームを開発するためのフレームワークとして、フリーで便利なプラグインがありますので、その準備をします。「Orthello」と「iTween」です。Unityはそもそも3Dが得意なエンジンで、2Dは工夫しないと描画が重くなるそうです。そこで、これらのプラグインを利用し、その工夫を実装する労力を省こうということです。
プロジェクトで使えるようにこれらプラグインをプロジェクトへインポートします。

まず、
UnityのAsset Storeへ。
ストアの検索機能などを使って、「Orthello」と「iTween」を探してください。
見つけたらDownloadクリックすると、Windowが開き、インポートするか聞いてくるのでそのままimportします。

するとProjectビューは

こんな感じになります。

「iTween」も同様にインポートし、

こんな感じになればプラグインのインポートは完了です。

次は各種設定に入っていきます。

Titanium StudioによるAndroid/iOSアプリ開発事始め

先日、AndroidとiOSの両プラットフォームで動作するゲームを作成することになりました。そこで開発環境を選定を行いました。
当初は、Unityを使用することにほぼ決めていたのですが、もっと選択肢があるのではと、急遽選定作業をやり直しました。すると無料で良い環境がいくつか見つかってきました。

  1. ngCore
  2. PhoneGap
  3. Titanium Mobile

です。ngCoreはマーケットがmobageに限定されるようで実績のない者には少し敷居が高いと感じました。(実際にアプリを提供するとなったときの話。開発自体はすごくやりやすそう。本気でビジネスにしていくときはこれかなと思いました。)
PhoneGapとTitanium Mobileはいろいろなところで比較されていました。総合的にはTitanium Mobileに軍配があがっているようです。PhoneGapのほうはWebKit上で動作するもの、TitaniumはNativeのアプリになっていること、ここが大きな違いのようです。楽をしたいならPhoneGap、こだわりたいならTitaniumといったところでしょうか。

私はこだわれるTitanium Mobileで開発していくことにし、早速、
JavaScriptとTitaniumではじめる iPhone/Androidアプリプログラミング

を読みました。非常に短時間で広い範囲を理解することができ、以降で説明する作業に取りかかれました。

まず、環境をダウンロードすべくhttp://www.appcelerator.comにて開発者登録をし、環境を構築し、サンプルアプリの起動まで確認しました。

赤枠で示したスタートアップのドキュメントがしっかりしていて、特に詰まることなくサンプルアプリ起動まで進められました。ドキュメントは英語ですが、図がほとんどですので問題なく進められると思います。

Tizen 2.0 alpha SDKをUbuntu 12.10へインストール

Tizen 2.0 alpha SDKをUbuntu 12.10へインストールについて、いくつかネット上に転がっていた情報とは異なる点があったので、その点を含めてインストール手順を書いておきます。

私はMacBook Proを使っています。すでにWindows 7をBootCampで利用するため、VMWare Fusionをインストールしていました。ここにUbuntu 12.10をインストールしました。Ubuntu Desktop 日本語 Remix CDを使用しました。

Tizen SDKインストールという本題からは話が逸れますが、Ubuntuが日本語環境にならないという現象に見舞われました。これは私の単純なミスでした。VMWare FusionでUbunutをインストールするときに、「簡易インストール」という機能があり、これを有効にしてインストールしていたためです。
「簡易インストールを使用」のチェックを外し、[続ける]をクリック。

さて、話を戻します。Ubuntuをインストール後、まずTizenに必要なパッケージをいくつか用意します。

まずはOracle Java 7

> sudo add-apt-repository pap:webupd8team/java
> sudo apt-get update
> sudo apt-get install oracle-java7-installer

あとはSDKの提供元(https://developer.tizen.org/downloads/sdk)
In Ubuntu®, the following packages: procps, gettext, libdbus-1-3, libcurl3, expect, gtk2-engines-pixbuf, grep, zip, make, and qemu-user-static
という情報があるので、足りないものを

> sudo apt-get install gettext libcurl3 expect libgnome2-0

でインストールしました。これで事前準備完了です。(この時点ではですが。)

次はインストーラの用意です。今回は(imageではなくて、)ネットワークを利用するので、
SDKの提供元からInstall Manager(tizen-sdk-2.0-ubuntu32.bin)をダウンロードします。

> chmod +x tizen-sdk-2.0-ubuntu32.bin
> ./tizen-sdk-2.0-ubuntu32.bin

これでWizardにしたがっていけば、インストール完了です。

インストール後、推奨環境(11.10など)でないためか、いくつかおかしな点がわかってきました。
まず、Unityのランチャーなどには登録されません。
ですので、コマンドラインからIDEを起動しました。

> ./tizen-sdk/ide/startup.sh

無事に立ち上がりましたが、Tizen Web Projectを新規作成しようとしたところで、次のエラーがでました。


Unhandled event loop exception
No more handles

An SWT error has occurred.
You are recommended to exit the workbench.
Subsequent errors may happen and may terminate the workbench without warning.
See the .log file for more details.
Do you want to exit the workbench?

これらエラーは以下で対応できました。

> sudo apt-get install libwebkitgtk-1.0.0

さて、無事プロジェクトを作成できるようになりましたので、実際にエミュレータで動かしたく、エミュレータマネージャーでエミュレータの生成を行います。

> ./tizen-sdk/tools/emulator/bin/emulator-manager

x86-standardでエミュレータを作成します。そして、作成エミューレータを起動すべく、「Launch」ボタンをクリックします。
ここで、何も反応がない状態となりました。どうやら起動に失敗しているようです。

作成したエミュレータはx86エミュレータと連携して動いているようなですので、まずx86エミュレータが動作しているのかを確認してみると、

> ./tizen-sdk/tools/emulator/bin/emulator-x86
./tizen-sdk/tools/emulator/bin/emulator-x86: error while loading shared libraries: libSDL-1.2.so.0: cannot open shared object file: No such file or directory

とlibSDL-1.2.so.0がない旨を返してきます。

そこで、

> sudo apt-get install libsdl1.2debian

すると、

> ./tizen-sdk/tools/emulator/bin/emulator-x86
Segmentation fault (コアダンプ)

とlibSDL-1.2.so.0を見つけられるようになります。(コアをはいていますが、emulator-x86が本来単独で動くものではなく、無理矢理動かしているからだと思われます。)
ちなみに、推奨環境バージョンのUbuntuでは元々/usr/lib/i386-linux-gnu/libSDL-1.2.so.0が置かれていました。

さて、emulator-managerを起動し、「Launch」ボタンをクリックします。
起動しました。

ひとまず、Tizenの開発を進められる状態になったと思っています。
しかしながら、「推奨環境でやるべきだったなぁ」というのが本音というか反省すべき点です。

Mountain Lionにおけるホイールスクロール方向の変更

Lionからのことらしいですが、ホイールによるスクロールの方向が逆になっています。iPhoneやiPadなどのタッチパネルでのスクロール動作に合わせた結果のようです。
しばらく気にせず使用していましたが、MacからWindows、あるいはWidowsからMacへ作業環境を変更した直後数分慣れるまでの煩わしさを解消する必要性を感じ、Mac側のスクロール方向を従来のものに戻すことにしました。

方法は、「システム環境設定」→「マウス」にて、
「スクロール方向:ナチュラル」についているチェックを外すのみです。