mieki256's diary



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\ でコマンドプロンプトを開いて、以下を実行。
haxelib install openfl
haxelib run openfl setup
他に、後で使うかもしれないライブラリ?もインストールした。
haxelib.exe install actuate
haxelib.exe install createjs
haxelib.exe install jQueryExtern
createjs は、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.* と若干仕様が変わったようで。
  • 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 を追加。

参考ページ。 :


以上です。

過去ログ表示

Prev - 2013/08 - Next
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project