Haxe에서 AnmiateCC html5 출력 사용

FLASH가 Dead이기 때문에 일부 게임을 html5로 변환하는 임무가 있습니다. 그래픽 및 애니메이션은 AnimateCC의 타임 라인에서 만들어집니다.Haxe에서 AnmiateCC html5 출력 사용

지금까지 프로세스는 다음과 같습니다. publish to swc, FlashDevelop -> AddToLibrary 및 모든 개체에 액세스했습니다. haxe에 thouse 파일을 연결하는 나는 방법을 찾고 있어요

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;

과 : 대상을 게시 내가 두 개의 파일을 HTML5 캔버스입니다 스테이지 또는 라이브러리에서 파일에 액세스 ex : new a1();

haxeLib에는 createJS에 대한 extern이 있지만이 출력과 함께 사용하는 방법을 알지 못합니다.

출처

2017-03-26 Jacek Tomczak

당신은 생성 된 lib 디렉토리, 예를 들면 : 분명히

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; 
}

에 대한 externs을 쓸 수는 매우 지루한 될 수는 그래서 그것을위한 도구 썼다 : https://github.com/elsassph/createjs-def

을 그리고 여기에 완벽한 예를 게시 : http://philippe.elsass.me/2013/05/type-annotations-for-the-createjs-toolkit/

그러나 JS 출력이 변경되었으므로 Animate CC의 최신 버전에서는 현재 깨졌습니다. 수정해야합니다.

출처

2017-04-15 22:13:44 Philippe

Haxe에서 AnmiateCC html5 출력 사용

답변

관련 문제