{"id":1263,"date":"2013-08-06T14:28:03","date_gmt":"2013-08-06T05:28:03","guid":{"rendered":"http:\/\/www.digifie.jp\/blog\/?p=1263"},"modified":"2013-08-06T17:59:19","modified_gmt":"2013-08-06T08:59:19","slug":"haxe-createjs-%e3%81%a7-particleemitterjs-%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%81%be%e3%81%97%e3%81%9f","status":"publish","type":"post","link":"https:\/\/www.digifie.jp\/blog\/archives\/1263","title":{"rendered":"Haxe + CreateJs \u3067 ParticleEmitterJS \u3092\u8a66\u3057\u3066\u307f\u307e\u3057\u305f"},"content":{"rendered":"
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>
Tweet<\/a><\/div><\/div>\n
\n

\u3061\u3087\u3063\u3068\u524d\u306b\u8a71\u984c\u306b\u306a\u3063\u3066\u305f ParticleEmitterJS \u3092 Haxe + CreateJs + Sublime Text2 \u3067\u8a66\u3057\u3066\u307f\u307e\u3057\u305f\u3002
\nParticleEmitterJS \u306b\u3064\u3044\u3066\u306f\u3001Clockmaker \u3055\u3093\u306e\u8a18\u4e8b<\/a> \u3084 \u306b\u3083\u3042\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3055\u3093\u306e\u8a18\u4e8b<\/a> \u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u3067\u3001\u3053\u308c\u3092 Haxe \u3067\u3084\u308d\u3046\u3068\u3057\u305f\u3068\u3053\u308d\u2026
\nHaxe \u3067 ParticleEmitterJS \u3092\u3069\u3046\u3084\u3063\u3066\u4f7f\u3046\u306e\u304b\u304c\u308f\u304b\u3089\u306a\u3044\u3058\u3083\u306a\u3044\u3067\u3059\u304b\uff57<\/p>\n

\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u3092\u307f\u3066\u307f\u308b\u3068\u300cextern \u30af\u30e9\u30b9\u300d\u3092\u4f7f\u3048\u3068\u66f8\u3044\u3066\u3042\u3063\u305f<\/a>\u306e\u3067\u3001\u3053\u308a\u3083\u3081\u3093\u3069\u3044\u306a\u30fc\u3068\u601d\u3044\u306a\u304c\u3089\u3082 extern \u30af\u30e9\u30b9\u3092\u4f5c\u308d\u3046\u3068\u3057\u305f\u306e\u3067\u3059\u304c\u3001\u3082\u3046\u3061\u3087\u3063\u3068\u30b0\u30b0\u3063\u3066\u307f\u308b\u3068\u2026<\/p>\n

\u30af\u30e9\u30b9\u30e1\u30bd\u30c3\u30c9\u306e\u30d6\u30ed\u30b0\u3067 Taiga \u3055\u3093\u306e\u8a18\u4e8b<\/a> \u3092\u898b\u3064\u3051\u307e\u3057\u305f\u3002<\/p>\n

\u3053\u3061\u3089\u306b ParticleEmitterJS \u306e extern \u30af\u30e9\u30b9\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u305f\u306e\u3067\u3001\u3053\u308c\u3092\u53c2\u8003\u306b\u3057\u3066\u3084\u3063\u3066\u307f\u308b\u3068\u2026<\/p>\n

\u3053\u3093\u306a\u306e\u304c\u3067\u304d\u307e\u3057\u305f\u3002
\n

\"particle<\/a>

\u753b\u50cf\u30af\u30ea\u30c3\u30af\u3067\u5225\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u958b\u304d\u307e\u3059<\/p><\/div><\/p>\n

\u3053\u308c\u3001\u57fa\u672c\u7684\u306b\u306f\u53c2\u8003\u8a18\u4e8b\u306b\u8a18\u8f09\u3055\u308c\u3066\u3044\u305f\u30b3\u30fc\u30c9\u3068\u305d\u308c\u307b\u3069\u5909\u308f\u3089\u306a\u3044\u3093\u3067\u3059\u304c\u3001\u4eca\u56de\u306e\u30c6\u30b9\u30c8\u3067\u306f Haxe 3.0 \u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u305f\u3081\u3001Haxe \u306e js \u306e API \u304c\u591a\u5c11\u5909\u66f4\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002 http:\/\/haxe.org\/manual\/haxe3\/migration<\/a><\/p>\n

\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u306b\u5f71\u97ff\u3057\u305f API \u306e\u5909\u66f4\u306f\u3001js.Lib \u306b\u3042\u3063\u305f window \u304c js.Browser \u3078\u5909\u66f4\u3001js.Dom \u306b\u3042\u3063\u305f Image \u304c js.html \u3078\u5909\u66f4\u3067\u3057\u305f\u3002<\/p>\n

\u8a18\u4e8b\u4e2d\u306e\u30b5\u30f3\u30d7\u30eb\u304b\u3089\u4e0a\u8a18 API \u3092\u5909\u66f4\u3057\u3066\u30d1\u30fc\u30c6\u30a3\u30af\u30eb\u306e\u8a2d\u5b9a\u3092\u5909\u3048\u3066\u307f\u305f\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u304c\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u306e\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\r\npackage;\r\n \r\nimport createjs.easeljs.Stage;\r\nimport createjs.easeljs.Point;\r\nimport createjs.easeljs.Ticker;\r\nimport createjs.ParticleEmitterType;\r\nimport createjs.ParticleEmitter;\r\nimport createjs.ParticleEmitterState;\r\nimport js.Browser;\r\nimport js.html.Image;\r\n\r\nclass Main {\r\n \r\n    private var stage:Stage;\r\n \r\n    private var particleImage:Image;\r\n \r\n    private var emitter:ParticleEmitter;\r\n \r\n    private var rad:Float = 0;\r\n \r\n    public static function main():Void \r\n    {\r\n        new Main();\r\n    }\r\n \r\n    public function new() \r\n    {\r\n        Browser.window.onload = initHandler;\r\n    }\r\n \r\n    private function initHandler(_):Void \r\n    {\r\n        particleImage = untyped __js__("new Image()");\r\n        particleImage.onload = initCanvas;\r\n        particleImage.src = "images\/particle_base.png";\r\n    }\r\n \r\n    private function initCanvas(_):Void \r\n    {\r\n        stage = new Stage(cast Browser.document.getElementById("canvas"));\r\n        stage.compositeOperation = "lighter";\r\n \r\n        handleResize(null);\r\n        Browser.window.onresize = handleResize;\r\n \r\n        Ticker.setFPS(60);\r\n        Ticker.useRAF = true;\r\n        Ticker.addListener(update);\r\n \r\n        var canvas:Dynamic = stage.canvas;\r\n        addParticleEmitter(canvas.width * 0.5, canvas.height * 0.5);\r\n    }\r\n \r\n    \r\n    private function addParticleEmitter( x, y ):Void \r\n    {\r\n        emitter = new ParticleEmitter( particleImage );\r\n        emitter.position = new Point( x, y );\r\n        emitter.emitterType = createjs.ParticleEmitterType.Emit;\r\n        emitter.emissionRate = 100;\r\n        emitter.maxParticles = 150;\r\n        emitter.life = 600;\r\n        emitter.lifeVar = 0;\r\n        emitter.speed = 80;\r\n        emitter.speedVar = 0;\r\n        emitter.positionVarX = 0;\r\n        emitter.positionVarY = 0;\r\n        emitter.accelerationX = 0;\r\n        emitter.accelerationY = 0;\r\n        emitter.radialAcceleration = 0;\r\n        emitter.radialAccelerationVar = 0;\r\n        emitter.tangentalAcceleration = 0;\r\n        emitter.tangentalAccelerationVar = 0;\r\n        emitter.angle = 0;\r\n        emitter.angleVar = 90;\r\n        emitter.startSpin = 0;\r\n        emitter.startSpinVar = 0;\r\n        emitter.endSpin = null;\r\n        emitter.endSpinVar = null;\r\n        emitter.startColor = [127, 255, 255];\r\n        emitter.startColorVar = [127, 127, 127];\r\n        emitter.startOpacity = 1;\r\n        emitter.endColor = null;\r\n        emitter.endColorVar = null;\r\n        emitter.endOpacity = null;\r\n        emitter.startSize = 75;\r\n        emitter.startSizeVar = 0;\r\n        emitter.endSize = 20;\r\n        emitter.endSizeVar = 0;\r\n        stage.addChild( emitter );\r\n    }\r\n \r\n    private var r:Float = 0;\r\n    private var n:Int = 1;\r\n    private function update():Void \r\n    {\r\n        stage.update();\r\n        var window:Dynamic = Browser.window;\r\n        var cx:Float = window.innerWidth * 0.5;\r\n        var cy:Float = window.innerHeight * 0.5;\r\n        \r\n        var dx:Float = Math.sin(rad) * r + cx;\r\n        var dy:Float = Math.cos(rad) * r + cy;\r\n\r\n        if( emitter != null ) {\r\n            emitter.position = new Point( dx, dy );\r\n        }\r\n\r\n        rad += 0.05;\r\n        \r\n        if( r < 10 )\r\n        {\r\n            if( n < 0 ) n = 1;\r\n        }\r\n\r\n        if( r > 300 )\r\n        {\r\n            if( n > 0 ) n = -1;\r\n        }\r\n\r\n        r += n * ( 1 - r * 0.001 );\r\n\r\n    }\r\n \r\n    private function handleResize(_):Void \r\n    {\r\n        var canvas:Dynamic = stage.canvas;\r\n        var window:Dynamic = Browser.window;\r\n        canvas.width = window.innerWidth;\r\n        canvas.height = window.innerHeight;\r\n\r\n        if(emitter != null) \r\n        {\r\n            emitter.position = new Point(canvas.width * 0.5, canvas.height * 0.5);\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
\u3068\u3044\u3046\u308f\u3051\u3067\u2026
\n\u4eca\u56de\u5b66\u3093\u3060\u3053\u3068\u306f\u300cjs \u306e\u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u3001extern \u30af\u30e9\u30b9\u3092\u3064\u304f\u3089\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3063\u3066\u306e\u304c\u3061\u3087\u3063\u3068\u3081\u3093\u3069\u304f\u3055\u305d\u3046\u300d\u3067\u3057\u305f\uff57<\/p>\n
        
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>        
Tweet<\/a><\/div><\/div>\n
\n","protected":false},"excerpt":{"rendered":"
\u3061\u3087\u3063\u3068\u524d\u306b\u8a71\u984c\u306b\u306a\u3063\u3066\u305f ParticleEmitterJS \u3092 Haxe + CreateJs + Sublime Text2 \u3067\u8a66\u3057\u3066\u307f\u307e\u3057\u305f\u3002 ParticleEmitterJS \u306b\u3064\u3044\u3066\u306f\u3001Clockmaker […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43,42],"tags":[],"_links":{"self":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1263"}],"collection":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/comments?post=1263"}],"version-history":[{"count":9,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1263\/revisions"}],"predecessor-version":[{"id":1272,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1263\/revisions\/1272"}],"wp:attachment":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/media?parent=1263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/categories?post=1263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/tags?post=1263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}