いつきの技的日記 RSSフィード Twitter

2013-06-12

HaxeではじめるCreateJS

とりあえずJSFlashっぽいことすれば喜ばれる世の中なので,CreateJSをつかってFlashのようなものを作ろう!!

Haxeを使えばAS3っぽいCreateJSを更にAS3っぽく書けます!

というわけで,FDTを使ったHaxe&CreateJSをはじめるまでのまとめ.

必要なもの

  • FDT
  • CreateJSなhaxelib

FDTの準備

インストールしましょう.

http://www.fdt.jp/

FDTはデフォルトHaxeをサポートしています.便利!

インストーラHaxeを入れるかどうか聞かれるので入れましょう.

HaxeでCreateJSを使う準備

HaxeでCreateJSを使う為にライブラリを導入します.

CreateJSはHaxeリポジトリHaxelib - the Haxe package manager に用意されているのでコマンドで簡単に導入可能です.

ターミナル

haxelib install createjs

と入力して実行しましょう.

FDTで開発してみる

FDTを開いて,File->New->New FDT Projectを選択.

以下のような画面になるので,ProjectNameと作業ディレクトリを入力して,templateで Haxe->BasicJSを選択してFinish!

f:id:itsuki_kosen:20130611232627p:image

プロジェクト階層は,

ProjectName
|- bin
|    |- index.html
|    |- js
|        |- App.js
|- src
|    |- Main.hx
|
|- ProjectName.hxml

となってます.

bin/js/App.jshaxeからコンパイルされた後のjsファイルとなります.またそれを実行してくれるのが bin/index.html

開発は src/ 以下に.hxファイルを作って行います.

また,ProjectName.hxmlというのはHaxeの設定ファイルで,MainClass(Flashで言うドキュメントクラス)の設定やアウトプット先(デフォルトはbin/js/App.js)の設定ができます.

ここでCreateJSを使うために,ProjectName.hxml内のArgumentに一文追加する必要があります.

以下の画像のように,[ -lib createjs ]を追加しましょう.

f:id:itsuki_kosen:20130611233505p:image

これはHaxeコンパイルするときに使うコマンドライン引数です.他にも色々あるので必要に応じて追加しましょう.

no title

コードを書く.

src/Main.hxを開きましょう.デフォルトではこれがMain class (ドキュメントクラス)です.要は実行時に一番はじめに呼ばれます.

Haxeコンストラクタは new()関数です.が,Main classだけmain()関数コンストラクタより先に呼ばれます.

とりあえず何もいじらずに実行すると,[Hello From FDT HaXe!] みたいな表示がでます.

それだけじゃつまらないので,何かAS3っぽいことをしてみましょう.Main.hxとindex.htmlを書き換えてCreateJSなコードを書いてみます.

  • Main.hx
package;

import createjs.easeljs.Shape;
import createjs.easeljs.Stage;
import createjs.easeljs.Ticker;
import js.Lib;
 
class Main {
	
	private var stage:Stage;
	private var _sp:Shape;
	
	public static function main():Void {
		new Main();
	}
 
	public function new() {
		Lib.window.onload = init;
	}
 
	private function init(_):Void {
		Ticker.useRAF = true;
		Ticker.setFPS(60);
		Ticker.addListener(onTick);
		stage = new Stage(cast js.Lib.document.getElementById("canvas"));
 
		_sp = new Shape();
		stage.addChild(_sp);
		drawBall("#FF0000");
		
		_sp.onClick = onClick;
	}
	
	private function onClick(e):Void {
		var col:String = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6);
		drawBall(col);
	}
	
	private function drawBall(s:String):Void {
		_sp.graphics.clear();
		_sp.graphics.beginFill(s);
		_sp.graphics.drawCircle(100, 100, 100);
		_sp.graphics.endFill();
	}
	private function onTick():Void {
		stage.update();
	}
}
<!DOCTYPE html>
<html>
	<head>
		<title>HelloCreateJS</title>
		<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
		<script type="text/javascript" src="js/App.js"></script>
	</head>
	<body>
		<div id="content">
			<div id="head"></div>
			<div id="body"></div>
			<div id="footer">
				<div id="haxe:trace"></div>
			</div> 
		</div>
		<canvas id="canvas" width="500" height="500"></canvas>
	</body>
</html>

クリックすると!色が!!変わる!!!

コード解説

ほぼAS3っぽいですね.

TickerはENTER_FRAMEみたいなものです.上記コードだと60fpsでonTick()が呼ばれます.

graphicsとか完全にAS3ですが,色指定だけ何故かStringになっています.

そのため,単純に Math.random()*0xffffff では駄目で,これを文字列に変換してやる必要が.

それをやっているのが,

var col:String = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6);  

これ.めんどいね.

index.htmlでは,createjsを使う為に,

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

<canvas id="canvas" width="500" height="500"></canvas>

の追加を行いました.

まとめ

Haxe&CreateJSを使えば,ほぼAS3っぽいコーディングJSアニメーションやゲームが作れる!

DOMもいじれるので結構応用効きます.

Haxeの文法は若干クセがある気がするので以下のページを見つつ慣れましょう!

no title


最近はまってきたので,jsdo.itによく投稿すると思います.

itsukichang - jsdo.it - Share JavaScript, HTML5 and CSS

jsdo.itのHaxe対応を期待してます!!!

参考

参考にしたページ&&&参考にすると勉強になるページ.

no title

no title

補足

なんか実行できないんだが!!?

FDTのRun->Run Configurations を開いて,FDT Haxe Viewerをダブルクリックしましょう.

New_Configurationってのが出来るので,そこで実行したいProjectと動かすhtmlファイルの指定を行ってください.

f:id:itsuki_kosen:20130612001655p:image

これでFDTのRunボタンを押したときにFDT内でプレビューされます.

別に設定しなくてもコンパイルはされてます.

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/itsuki_kosen/20130612/1370963515
リンク元
Connection: close