2013/08/30(金) [n年前の日記]
#1 [haxe] OpenFL等をインストール
Haxeと一緒に使って画像表示等を行う NME というライブラリ？があったのだけど。今現在は OpenFL とやらに変わったらしいので、そのあたりをインストールしてみたり。環境は Windows7 x64。
とりあえず、Haxe 3.0 をインストール。これは先日、FlashDevelop をアップデートした際にインストール済み。 _Download - Haxe から、haxe-3.0.0-win.exe をDL・実行してインストール。自分の場合は、C:\HaxeToolkit\ にインストールした…のだったかな。
OpenFL をインストール。C:\HaxeToolkit\haxe\ でコマンドプロンプトを開いて、以下を実行。
何を入れたのか確認。インストールされたアレコレの一覧が表示される。
この後、もしかすると、やりたいことに合わせて以下を実行する必要もあるのかもしれず。
OpenFL がインストールされたかどうか、動作確認する。適当なフォルダに移動してから、以下を実行。
openfl create DisplayingABitmap は、DisplayingABitmap という種類のサンプルが入ったフォルダを作る。openfl test neko は、neko を使って実行せよ、と指示を出してるのではないかなと。また、以下のように打てば、flash や html5 を使って画像が表示される。
他にも色々なサンプルがあるようで、openfl create と打ち込むと、作れるサンプルの種類がズラズラ表示される模様。
FlashDevelop 上で OpenFL を使ってみよう、と思ったけれど、新規プロジェクト作成時に OpenFL Project が選択肢として出てこなくて。調べてみたら、正式公開版の FlashDevelop 4.4.2 ではまだ対応してなくて、4.4.3開発版からの対応になるっぽい。
_FlashDevelop.org - View topic - Latest development build of FlashDevelop 4
とりあえず、4.4.3開発版をインストール。新規プロジェクト作成時に、OpenFL Project が出てくるようになった。
とりあえず、Haxe 3.0 をインストール。これは先日、FlashDevelop をアップデートした際にインストール済み。 _Download - Haxe から、haxe-3.0.0-win.exe をDL・実行してインストール。自分の場合は、C:\HaxeToolkit\ にインストールした…のだったかな。
OpenFL をインストール。C:\HaxeToolkit\haxe\ でコマンドプロンプトを開いて、以下を実行。
haxelib install openfl haxelib run openfl setup他に、後で使うかもしれないライブラリ？もインストールした。
haxelib.exe install actuate haxelib.exe install createjs haxelib.exe install jQueryExterncreatejs は、JavaScript でアニメーションを簡単に行えるようにするためのライブラリ、という認識でいいのかな？ jQueryExtern は、たぶん jQuery を使えるようにするための何かなのだろうと。
何を入れたのか確認。インストールされたアレコレの一覧が表示される。
haxelib.exe list
この後、もしかすると、やりたいことに合わせて以下を実行する必要もあるのかもしれず。
openfl setup windows openfl setup android前者は、Visual Studio 英語版をインストールしようとする。後者は、試してないけど、Android SDK や Android NDK がインストールされるらしい。自分の環境では、以前そのあたりをインストール済みだったらしいので、今回はスキップ。
OpenFL がインストールされたかどうか、動作確認する。適当なフォルダに移動してから、以下を実行。
openfl create DisplayingABitmap cd DisplayingABitmap openfl test neko「openFL」と書かれた画像が表示されたら、動作成功。
openfl create DisplayingABitmap は、DisplayingABitmap という種類のサンプルが入ったフォルダを作る。openfl test neko は、neko を使って実行せよ、と指示を出してるのではないかなと。また、以下のように打てば、flash や html5 を使って画像が表示される。
openfl test flash openfl test html5
他にも色々なサンプルがあるようで、openfl create と打ち込むと、作れるサンプルの種類がズラズラ表示される模様。
>openfl create You must specify 'project' or a sample name when using the 'create' command. Usage: openfl create project "com.package.name" "Company Name" openfl create extension "ExtensionName" openfl create SampleName Available samples: - ActuateExample - AddingAnimation - AddingText - DisplayingABitmap - HandlingKeyboardEvents - HandlingMouseEvents - HerokuShaders - openfl-samples - PiratePig - PlayingSound - SimpleBox2D - SimpleOpenGLView
FlashDevelop 上で OpenFL を使ってみよう、と思ったけれど、新規プロジェクト作成時に OpenFL Project が選択肢として出てこなくて。調べてみたら、正式公開版の FlashDevelop 4.4.2 ではまだ対応してなくて、4.4.3開発版からの対応になるっぽい。
_FlashDevelop.org - View topic - Latest development build of FlashDevelop 4
とりあえず、4.4.3開発版をインストール。新規プロジェクト作成時に、OpenFL Project が出てくるようになった。
◎ Haxe + createjs とやらも試してみたり。 :
巷のサンプルを動かそうとしたのだけど、ちとハマった。Haxe 3.0 は Haxe 2.* と若干仕様が変わったようで。
とりあえず、巷のサンプルを、コピペ＆修正して、以下のような感じになった。マウスクリックした場所に、赤丸が飛んでくるサンプル。
src/helloworld/Main.hx
bin/index.html
プロジェクト設定で、書き出し先を bin\haxejshelloworld.js にして。コンパイラ設定の Libraries に、createjs を追加。
- js.Lib.document や js.Lib.window は、js.Browser.document や js.Browser.window に変わっている。
- 解説ページによっては、コンパイラ？に --js-modern オプションを渡せ、と記述があるけど、それは Haxe 2.* 用。Haxe 3.0 ではデフォルトで有効になっているから指定する必要無し。逆に、Haxe 3.0 で昔風のチェックをしたい場合、--js-classic を指定するらしい。
とりあえず、巷のサンプルを、コピペ＆修正して、以下のような感じになった。マウスクリックした場所に、赤丸が飛んでくるサンプル。
src/helloworld/Main.hx
package helloworld;
import createjs.tweenjs.Ease;
import createjs.easeljs.Ticker;
import createjs.tweenjs.Tween;
import createjs.easeljs.Stage;
import createjs.easeljs.Shape;
import js.Browser;
class Main
{
private static var _shape:Shape;
private static var _stage:Stage;
public static function main():Void
{
Ticker.useRAF = true;
Ticker.setFPS(60);
_stage = new Stage(cast Browser.document.getElementById("c"));
_stage.onMouseUp = stageClickHandler;
_shape = new Shape();
_shape.graphics.beginFill("#FF0000");
_shape.graphics.drawCircle(20, 20, 20);
_shape.graphics.endFill();
_stage.addChild(_shape);
Ticker.addListener(tickHandler);
}
private static function tickHandler():Void
{
_stage.update();
}
private static function stageClickHandler():Void
{
Tween.removeTweens(_shape);
Tween.get(_shape).to({x:_stage.mouseX - 20, y:_stage.mouseY - 20}, 1000, Ease.elasticOut);
}
}
bin/index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=720">
<meta charset="UTF-8">
<title>Simple</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<style type="text/css">
body {margin: 0; padding: 0; background-color: #D4D4D4; }
canvas { margin: 0; padding: 0; background-color: #FFFFFF; }
</style>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script src="haxejshelloworld.js"></script>
</body>
</html>
プロジェクト設定で、書き出し先を bin\haxejshelloworld.js にして。コンパイラ設定の Libraries に、createjs を追加。
◎ 参考ページ。 :
_HaxeとOpenFL導入メモ >> Every day is Carnival
_Get Started - openfl/openfl Wiki - GitHub
_OpenFL :: Download
_OpenFL :: Samples
_Getting Started with Haxe 3 and OpenFL(Windows)
_Haxe + CreateJs を Sublime Text 2 で開発する準備をしてみたのでメモ | LLC DigiFie
_Haxe + CreateJS 開発メモ#1 準備 ｜ Developers.IO
_OpenFLについて
_Haxe で始める CreateJS
_Haxe/JavaScriptチュートリアル ・ Haxe/JavaScript tutorial 0.2 documentation
_Haxe 3 Migration - Haxe
_JS modern - Haxe
_ActionScript入門Wiki - HaxeでCreateJSを利用する
_Haxe + CreateJS 開発メモ#1 準備 ｜ Developers.IO
_Get Started - openfl/openfl Wiki - GitHub
_OpenFL :: Download
_OpenFL :: Samples
_Getting Started with Haxe 3 and OpenFL(Windows)
_Haxe + CreateJs を Sublime Text 2 で開発する準備をしてみたのでメモ | LLC DigiFie
_Haxe + CreateJS 開発メモ#1 準備 ｜ Developers.IO
_OpenFLについて
_Haxe で始める CreateJS
_Haxe/JavaScriptチュートリアル ・ Haxe/JavaScript tutorial 0.2 documentation
_Haxe 3 Migration - Haxe
_JS modern - Haxe
_ActionScript入門Wiki - HaxeでCreateJSを利用する
_Haxe + CreateJS 開発メモ#1 準備 ｜ Developers.IO
[ ツッコむ ]
以上です。