2014年8月17日日曜日

Haxe 事始め(2) OpenFL で作成したプロジェクトの基本構成を見てみよう

前回の記事では OpenFL のサンプルである PiratePig を動かしてみるところまで話が進んだ。

手元にソースがあるので、 OpenFL の基本を学ぶ材料として、PiratePig の実装を見て行こう。

プロジェクトの基本構成


まずプロジェクトディレクトリだが次の構成でプロジェクトは作成されているのが見て取れる。



Assets がアプリ用リソースのディレクトリ、 Source がアプリ用のソースコードを置くディレクトリとなっている。
Pirate Pig.hxproj は FlashDevelop という IDE 用のファイルで、 Haxe ではよくつかわれる IDE だ。

project.xml が OpenFL (というよりもベースにしている lime ) で重要なファイルとなる。
上にあげた各ディレクトリは、このファイルで定義されている (ので、パスや名前を変えることもできる) 。

少々発展的な内容になるが、 OpenFL は lime という、また別の haxe ライブラリに依存している。
lime は haxe でのクロスプラットフォームネイティブアプリ開発基盤となるライブラリで、
前回、大変便利に開発環境が整ったのは、だいたいこのライブラリのおかげだ。

次は、PiratePig の project.xml を見ていこう。

プロジェクト設定ファイル



さっそく <meta /> タグと <app /> タグが登場するが、ここはあまり説明しなくても迷わないだろう。
それぞれアプリケーションの情報を表すタグと、アプリケーションの基本となる設定のタグだ。
app タグではアプリケーションのエントリポイントなどが指定できる。
PiratePig では priatepig.PiratePig がエントリポイントとなる main クラスとして指定されているのがわかる。

<windows /> タグはアプリケーション実行時のウィンドウサイズなどが指定できるタグだ。
フルスクリーンで起動する場合や解像度の変更などもここで指定する。
もちろん、スマホアプリをターゲットにする場合は縦持ち・横持ちもここで指定することとなる。

<source /> <haxelib /> <icon /> タグもそのままだ。特に <source /> タグでソースコードディレクトリが指定されている。
念のため記しておくと、 haxe のライブラリとして openfl と actuate が指定されている (lime と openfl は、一応は別の存在である) 。
actuate はアニメーション用のライブラリだ。

<assets /> タグでは各種リソース用のディレクトリが指定できる。
ここで使用するファイルまたはディレクトリを登録しておくことで、ソースコード中から openfl.Assets を用いてアクセス可能となる。
PiratePig においては音声ファイルを、うまくプラットフォームに分けて変えているのがわかると思う。

具体的な assets タグの説明については、後で詳しく述べたい。

PiratePig を元にしたプロジェクトファイルの説明は以上になる。
より詳しくは、公式ドキュメントを読むのがよいだろう。

エントリポイントとメインクラスの説明

project.xml でも指定されているとおり、メインクラスは Source/piratepig/PiratePig.hx で定義される
PiratePig クラスだ。
package piratepig;


import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.system.Capabilities;
import flash.Lib;
import openfl.Assets;


class PiratePig extends Sprite {


        private var Background:Bitmap;
        private var Footer:Bitmap;
        private var Game:PiratePigGame;


        public function new () {

                super ();

                initialize ();
                construct ();

                resize (stage.stageWidth, stage.stageHeight);
                stage.addEventListener (Event.RESIZE, stage_onResize);

        }


        private function construct ():Void {

                Footer.smoothing = true;

                addChild (Background);
                addChild (Footer);
                addChild (Game);

        }

        private function initialize ():Void {

                Background = new Bitmap (Assets.getBitmapData ("images/background_tile.png"));
                Footer = new Bitmap (Assets.getBitmapData ("images/center_bottom.png"));
                Game = new PiratePigGame ();

        }


        private function resize (newWidth:Int, newHeight:Int):Void {

                Background.width = newWidth;
                Background.height = newHeight;

                Game.resize (newWidth, newHeight);

                Footer.scaleX = Game.currentScale;
                Footer.scaleY = Game.currentScale;
                Footer.x = newWidth / 2 - Footer.width / 2;
                Footer.y = newHeight - Footer.height;

        }


        private function stage_onResize (event:Event):Void {

                resize (stage.stageWidth, stage.stageHeight);

        }


}

いろいろと書かれている。
PiratePig のゲーム自体に必要なコードが数多く書かれているわけなのだが、必要最小限はどの程度なのだろう?
実は、OpenFL で必要な最小構成は下記に示したコードだけだ。

package piratepig;

import flash.display.Sprite;

class PiratePig extends Sprite {

        public function new () {

                super ();

        }
}

意外……と、いうか、あっけないほど必要なコードが少ないのが見て取れる。
何しろ super() だけだ。
本当にこれだけでいいのか確認したい場合は、なんなら空のプロジェクトを

lime create openfl:project SomeProject

などで作ってみるとすぐにわかる。 本当にこれだけだ。


OpenFL はこれだけでアプリの基本部分がすべて動く。
それもマルチプラットフォームでだ。

基本的なところを抑えたので、次回は「どうやって画像を表示するか」「画像をどうやってアニメーションさせるか」「どうやってマウス入力を取り扱っているか」の3点を、同じく PiratePig を元にしてみていきたい。

2014年3月4日火曜日

Haxe 事始め(1) OpenFL でサンプルを動かしてみるまで

仕事柄様々な技術に触れることが多い。

そんなわけで、突然だけど、 Haxe をやってみようかなと思った。

(1) で終わってしまった RSpec 周りの記事は、来年までに拡充したい。多分。

Haxe って何?


マルチパラダイムな汎用プログラミング言語で、 Haxe をコンパイルすることで C++ や ActionScript, Javascript のコードが生成できる。
パフォーマンスが素晴らしいわけではないけど、工夫次第でどうとでもなりそうな感触があって可愛い子だ。
あと、強めの型づけだったりするのだけど、逆に、バグを起こしにくくしている気がする・・・ので、コードを書いて確かめていきたい。

あまり他のブログとかで触れられていない気がするけれど、もう一つ、個人的に素晴らしいと思った特徴がある。

それは、開発環境の整備が容易だということだ。

例えば、ruby などは Windows 上に開発環境を作ることが絶望的に面倒くさい。と、いうよりも LL の開発環境と Windows との相性はすこぶる悪い。
Java や C++ は開発環境のスタンダードがあるが、そもそも気軽に開発をスタートできるような言語ではない。 VisualStudio 高いし。。。

一方 haxe は自動インストーラが、なんと標準で用意されている。 windows でも、 mac でも。

個人的に Windows8 と Mac OSX で haxe をインストールしたが、インストーラを使えば何も迷うことなくインストールできた。

すこぶる便利な世の中になったと思う。

この記事の目標


さて、この記事では、その Haxe を使った開発キット OpenFL の紹介をしていきたいと思う。


マルチプラットフォームな開発キットとして OpenFL というものがある。

これを使って、何かゲームを作ってみようと思うのだけど、まずはサンプルを動かすまで見ていこう。

ゲームの開発自体は HTML5 でやり、同じコードを様々な環境に移すとどうなるか、ひとつづつ見ていきたい。

OpenFL のインストールまで


これもインストールがものすごく簡単だ。

インストールページを見てほしい

ほら、簡単でしょ(^^ と、思わず顔文字を出したくなるくらいに簡単だ。

OpenFL でサンプルを動かすまでに


  1. Haxe のインストール
  2. lime のインストール
  3. OpenFL のインストール
  4. プラットフォームのセットアップ

と4ステップが必要だが、それぞれ

  1. そのページにある windows って書かれたリンククリックして、ダウンロードできる exe を実行するだけ
  2. そのページに有る2コマンドを cmd.exe か powershell あたりで実行するだけ
  3. そのページに有る1コマンドを cmd.exe か powershell あたりで実行するだけ
  4. そのページに有る1コマンドを cmd.exe か powershell あたりで実行するだけ

で、できるのだ。

嘘だと思うでしょ?

例えば、 lime setup windows をしてみたらどうなったか、スクリーンショットを見てほしい。



そう。必要なら、半自動的に VisualStudio を持ってきてくれるのだ!!!

mac で iOS アプリを作ろうとした時、ないなら XCode のダウンロードページを開いてくれるし、
android アプリを作ろうとした時、みんなが悩む android コマンドや ndk をどこに置くのか、どこから持ってくるのかも、自動的にやってくれる!!

ちなみに著者は、公式ドキュメント通り、 windows 用のセットアップを終わらせた。

Flash と HTML5 のセットアップは特に必要ないので、ここまでの作業で HTML5, Flash そして Windows アプリの開発まで出来るようになったということになる。

サンプルの実行まで


上のステップ 3 まで終われば、サンプルを動かすことまでできる。

lime create openfl:PiratePig

で動かせるサンプルが作れる。
まず、ビルドをするためには lime build TARGET を実行する必要がある。
早速試してみよう。

cd ./PiratePig
lime build html5

著者の環境では、これでエラーが起きた。

Error: Could not find haxelib "actuate", does it need to be installed?

こんなエラーだったので haxelib install actuate してから、もう一度ビルドを実行。今度は成功した。

コマンドラインから実行もできる。

lime run html5

これで実行可能だ!

そして、 html5 を flash に変えることですぐに flash アプリが、 windows に帰ることですぐに windows アプリが作れる。

次回は、 OpenFL の基礎機能を見て行きたいと思う。

それでは。また。