0

因为 FLASH 已死,我的任务是将一些游戏转换为 html5。图形和动画是在 AnimateCC 的时间线上制作的。

到目前为止,该过程看起来像:发布到 swc/swf、FlashDevelop -> AddToLibrary 并且我可以访问所有对象。当发布目标是 HTML5 画布时,我有两个文件:

testHaxe.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>testHaxe</title>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="testHaxe.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {

    canvas = document.getElementById("canvas");
    images = images||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
    exportRoot = new lib.testHaxe();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}

</script>

</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
    <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>

testHaxe.js

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes
lib.webFontTxtFilters = {}; 

// library properties:
lib.properties = {
    width: 550,
    height: 400,
    fps: 24,
    color: "#FFFFFF",
    webfonts: {},
    manifest: [
        {src:"images/Bitmap1.png", id:"Bitmap1"}
    ]
};



lib.webfontAvailable = function(family) { 
    lib.properties.webfonts[family] = true;
    var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
    for(var f = 0; f < txtFilters.length; ++f) {
        txtFilters[f].updateCache();
    }
};
// symbols:



(lib.Bitmap1 = function() {
    this.initialize(img.Bitmap1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,103,133);


(lib.в1 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Warstwa 1
    this.instance = new lib.Bitmap1();
    this.instance.setTransform(-2,-2);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-2,-2,103,133);


// stage content:
(lib.testHaxe = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer 1
    this.instance = new lib.в1();
    this.instance.setTransform(85,90,1,1,0,0,0,49.5,64.5);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(308.5,223.5,103,133);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;

我正在寻找一种将 thouse 文件连接到 haxe 并访问 Stage 或库 ex 中的文件的方法:new a1();

haxeLib 中有 createJS 的外部变量,但我不知道如何将它们与此输出一起使用。

4

1 回答 1

0

您可以为生成的 lib 编写 externs,例如:

package lib;
import createjs.MovieClip;

@:native("lib.B1")
extern class B1 extends MovieClip {
}

@:native("lib.testHaxe")
extern class TextHaxe extends MovieClip {
    public var instance:B1;
}

显然这可能非常乏味,所以我为它编写了一个工具: https ://github.com/elsassph/createjs-def

并在这里发布了一个完整的例子:http: //philippe.elsass.me/2013/05/type-annotations-for-the-createjs-toolkit/

然而,由于 JS 输出发生了变化,它目前在最新版本的 Animate CC 中被破坏 - 它需要修复。

于 2017-04-15T22:13:44.377 回答