Phaser Flash Asset Exporter
Phaser flash asset exporter lets you export .fla files library symbols to a Phaser Asset document (.js) including a spritesheet atlas in (.png) with JSON metadata.
How it works:
- Looks in the library for linked symbols and their dependencies and generates a spritesheet for referenced bitmaps.
- Generates Phaser Asset document with document properties and symbols.
Supported features:
- Generate atlas and metadata with linked symbols and their dependencies bitmaps.
- Generate linked symbols and their dependecies.
- Generate Shapes with linear fill an bitmap fill(without pattern transforms).
- Generate Texts.
- Generate scale and rotation transformations.
- Shape bitmap fill
Not Supported features:
- Shape oval gradient fillColor
- Timeline animations
Phaser Asset document example:
// Generated by PFA-Exporter v0.3.8 at Wed, 15 Jun 2016 16:58:33 GMT
(function (lib) {
var drawPolygon = function(ctx, poly) {
if(poly.length < 1) return;
ctx.beginPath();
ctx.moveTo(poly[0].x, poly[0].y);
for( var i=1 ; i < poly.length ; i++ ) {
var p = poly[i];
if(!p.bc)
ctx.lineTo(p.x , p.y);
else
ctx.bezierCurveTo(p.bc[0],p.bc[1],p.bc[2],p.bc[3], p.x, p.y);
}
}
// library properties:
lib.properties = {
width:1024,
height:745,
fps:24,
color:'#FFFFFF',
atlas: {
name:'PFA-Exporter',
image:'PFA-Exporter.png',
metadata:'PFA-Exporter.json',
}
};
// symbols:
lib.RabbitLegBitmap = function(game, x, y){
return game.make.sprite(x, y, 'PFA-Exporter', 'RabbitLegBitmap');
}
lib.S1 = function(game, x, y){
var group = game.make.group();
group.x = x;
group.y = y;
var instance1 = lib.RabbitLegBitmap(game,13.05,0);
instance1.scale.set(0.2903594970703125,0.3137664794921875);
var S1text2 = game.make.text(0,35.85,'Rabbit Leg',{font:" 12pt 'Times New Roman'",fill:'#000000',strokeThickness:2});
group.addMultiple([instance1,S1text2]);
return group;
}
lib.Symbol1 = function(game, x, y){
var group = game.make.group();
group.x = x;
group.y = y;
var instance1 = lib.BackgroundButtom(game,0,0);
var instance2 = lib.S1(game,4.25,12.15);
group.addMultiple([instance1,instance2]);
return group;
}
lib.RabbitLegAward = function(game, x, y){
var group = game.make.group();
group.x = x;
group.y = y;
var instance1 = lib.Symbol1(game,0,0);
var RabbitLegAwardtext2 = game.make.text(24,65.85,'2,00 €',{font:"bold 10pt 'Times New Roman'",fill:'#FFFFFF',strokeThickness:2});
RabbitLegAwardtext2.scale.set(1,0.6963958740234375);
group.addMultiple([instance1,RabbitLegAwardtext2]);
return group;
}
lib.HorseshoeCircle = function(game, x, y){
var gradient = null;
var group = game.make.group();
group.x = x;
group.y = y;
var HorseshoeCircle_shape1BD = game.cache.getBitmapData('HorseshoeCircle_shape1BD');
if(!HorseshoeCircle_shape1BD) {
HorseshoeCircle_shape1BD = game.make.bitmapData(256, 256, 'HorseshoeCircle_shape1BD', true);
var ctx = HorseshoeCircle_shape1BD.ctx;
gradient = ctx.createLinearGradient(-35.35,-35.35,35.35,35.35000000000001);
gradient.addColorStop(0.00392156862745098, '#FF070B');
gradient.addColorStop(1, '#FFFFFF');
ctx.fillStyle = gradient;
drawPolygon(ctx, [{x:200, y:50},{x:185.35, y:14.65,bc: [200,36.25,195.1,24.45]},{x:150, y:0,bc: [175.6,4.9,163.75,0]},{x:114.65, y:14.65,bc: [136.2,0,124.4,4.9]},{x:100, y:50,bc: [104.85,24.45,100,36.25]},{x:114.65, y:85.35,bc: [100,63.8,104.85,75.6]},{x:150, y:100,bc: [124.4,95.15,136.2,100]},{x:185.35, y:85.35,bc: [163.75,100,175.6,95.15]},{x:200, y:50,bc: [195.1,75.6,200,63.8]}]);
ctx.fill();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1;
drawPolygon(ctx, [{x:200, y:50},{x:185.35, y:14.65,bc: [200,36.25,195.1,24.45]},{x:150, y:0,bc: [175.6,4.9,163.75,0]},{x:114.65, y:14.65,bc: [136.2,0,124.4,4.9]},{x:100, y:50,bc: [104.85,24.45,100,36.25]},{x:114.65, y:85.35,bc: [100,63.8,104.85,75.6]},{x:150, y:100,bc: [124.4,95.15,136.2,100]},{x:185.35, y:85.35,bc: [163.75,100,175.6,95.15]},{x:200, y:50,bc: [195.1,75.6,200,63.8]}]);
ctx.stroke();
}
var HorseshoeCircle_shape1 = game.make.sprite(0, 0, HorseshoeCircle_shape1BD);
var HorseshoeCircle_shape2BD = game.cache.getBitmapData('HorseshoeCircle_shape2BD');
if(!HorseshoeCircle_shape2BD) {
HorseshoeCircle_shape2BD = game.make.bitmapData(256, 256, 'HorseshoeCircle_shape2BD', true);
var ctx = HorseshoeCircle_shape2BD.ctx;
gradient = ctx.createLinearGradient(49.987500000000004,0,-49.987500000000004,0);
gradient.addColorStop(0.00392156862745098, '#008A00');
gradient.addColorStop(1, '#FFFFFF');
ctx.fillStyle = gradient;
drawPolygon(ctx, [{x:14.65, y:185.35},{x:50, y:200,bc: [24.4,195.15,36.2,200]},{x:85.35, y:185.35,bc: [63.75,200,75.6,195.15]},{x:100, y:150,bc: [95.1,175.6,100,163.8]},{x:85.35, y:114.65,bc: [100,136.25,95.1,124.45]},{x:50, y:100,bc: [75.6,104.9,63.75,100]},{x:14.65, y:114.65,bc: [36.2,100,24.4,104.9]},{x:0, y:150,bc: [4.85,124.45,0,136.25]},{x:14.65, y:185.35,bc: [0,163.8,4.85,175.6]}]);
ctx.fill();
gradient = ctx.createLinearGradient(-35.7125,-35.7125,35.7125,35.71249999999999);
gradient.addColorStop(0.00392156862745098, '#008A00');
gradient.addColorStop(1, '#FFFFFF');
ctx.strokeStyle = gradient;
ctx.lineWidth = 1;
drawPolygon(ctx, [{x:14.65, y:185.35},{x:50, y:200,bc: [24.4,195.15,36.2,200]},{x:85.35, y:185.35,bc: [63.75,200,75.6,195.15]},{x:100, y:150,bc: [95.1,175.6,100,163.8]},{x:85.35, y:114.65,bc: [100,136.25,95.1,124.45]},{x:50, y:100,bc: [75.6,104.9,63.75,100]},{x:14.65, y:114.65,bc: [36.2,100,24.4,104.9]},{x:0, y:150,bc: [4.85,124.45,0,136.25]},{x:14.65, y:185.35,bc: [0,163.8,4.85,175.6]}]);
ctx.stroke();
}
var HorseshoeCircle_shape2 = game.make.sprite(0, 0, HorseshoeCircle_shape2BD);
var HorseshoeCircle_shape3BD = game.cache.getBitmapData('HorseshoeCircle_shape3BD');
if(!HorseshoeCircle_shape3BD) {
HorseshoeCircle_shape3BD = game.make.bitmapData(256, 256, 'HorseshoeCircle_shape3BD', true);
var ctx = HorseshoeCircle_shape3BD.ctx;
gradient = ctx.createLinearGradient(49.987500000000004,0,-49.987500000000004,0);
gradient.addColorStop(0.00392156862745098, '#0000F0');
gradient.addColorStop(0.23137254901960785, '#8181F7');
gradient.addColorStop(0.5098039215686274, '#814F2E');
gradient.addColorStop(1, '#FFFFFF');
ctx.fillStyle = gradient;
drawPolygon(ctx, [{x:185.2, y:114.95},{x:149.85, y:100.3,bc: [175.45,105.2,163.65,100.35]},{x:114.5, y:114.95,bc: [136,100.35,124.2,105.25]},{x:99.85, y:150.3,bc: [104.75,124.7,99.85,136.5]},{x:114.5, y:185.65,bc: [99.8,164.15,104.75,175.9]},{x:115, y:186.15,bc: [114.7,185.85,114.85,186]},{x:149.85, y:200.3,bc: [124.65,195.6,136.25,200.3]},{x:185.2, y:185.65,bc: [163.65,200.3,175.45,195.4]},{x:199.85, y:150.3,bc: [194.9,175.95,199.8,164.15]},{x:185.7, y:115.45,bc: [199.8,136.75,195.15,125.1]},{x:185.2, y:114.95,bc: [185.55,115.3,185.4,115.15]}]);
ctx.fill();
ctx.strokeStyle = '#FFFF33';
ctx.lineWidth = 3;
drawPolygon(ctx, [{x:185.2, y:114.95},{x:149.85, y:100.3,bc: [175.45,105.2,163.65,100.35]},{x:114.5, y:114.95,bc: [136,100.35,124.2,105.25]},{x:99.85, y:150.3,bc: [104.75,124.7,99.85,136.5]},{x:114.5, y:185.65,bc: [99.8,164.15,104.75,175.9]},{x:115, y:186.15,bc: [114.7,185.85,114.85,186]}]);
ctx.stroke();
ctx.strokeStyle = '#0099CC';
ctx.lineWidth = 1;
drawPolygon(ctx, [{x:149.85, y:200.3},{x:185.2, y:185.65,bc: [163.65,200.3,175.45,195.4]},{x:199.85, y:150.3,bc: [194.9,175.95,199.8,164.15]},{x:185.7, y:115.45,bc: [199.8,136.75,195.15,125.1]},{x:185.2, y:114.95,bc: [185.55,115.3,185.4,115.15]}]);
ctx.stroke();
}
var HorseshoeCircle_shape3 = game.make.sprite(0, 0, HorseshoeCircle_shape3BD);
var HorseshoeCircle_shape4BD = game.cache.getBitmapData('HorseshoeCircle_shape4BD');
if(!HorseshoeCircle_shape4BD) {
HorseshoeCircle_shape4BD = game.make.bitmapData(256, 256, 'HorseshoeCircle_shape4BD', true);
var ctx = HorseshoeCircle_shape4BD.ctx;
gradient = ctx.createLinearGradient(-44.82500000000001,44.825,44.82499999999999,-44.825);
gradient.addColorStop(0, '#000000');
gradient.addColorStop(1, '#FFFFFF');
ctx.fillStyle = gradient;
drawPolygon(ctx, [{x:100, y:50},{x:85.35, y:14.65,bc: [100,36.25,95.1,24.45]},{x:50, y:0,bc: [75.6,4.9,63.75,0]},{x:14.65, y:14.65,bc: [36.2,0,24.4,4.9]},{x:0, y:50,bc: [4.85,24.45,0,36.25]},{x:14.65, y:85.35,bc: [0,63.8,4.85,75.6]},{x:50, y:100,bc: [24.4,95.15,36.2,100]},{x:85.35, y:85.35,bc: [63.75,100,75.6,95.15]},{x:100, y:50,bc: [95.1,75.6,100,63.8]}]);
ctx.fill();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1;
drawPolygon(ctx, [{x:100, y:50},{x:85.35, y:14.65,bc: [100,36.25,95.1,24.45]},{x:50, y:0,bc: [75.6,4.9,63.75,0]},{x:14.65, y:14.65,bc: [36.2,0,24.4,4.9]},{x:0, y:50,bc: [4.85,24.45,0,36.25]},{x:14.65, y:85.35,bc: [0,63.8,4.85,75.6]},{x:50, y:100,bc: [24.4,95.15,36.2,100]},{x:85.35, y:85.35,bc: [63.75,100,75.6,95.15]},{x:100, y:50,bc: [95.1,75.6,100,63.8]}]);
ctx.stroke();
}
var HorseshoeCircle_shape4 = game.make.sprite(0, 0, HorseshoeCircle_shape4BD);
var HorseshoeCircle_shape5BD = game.cache.getBitmapData('HorseshoeCircle_shape5BD');
if(!HorseshoeCircle_shape5BD) {
HorseshoeCircle_shape5BD = game.make.bitmapData(256, 256, 'HorseshoeCircle_shape5BD', true);
var ctx = HorseshoeCircle_shape5BD.ctx;
var HorseshoeBitmap = game.make.renderTexture(100,100);
HorseshoeBitmap.render(lib.HorseshoeBitmap(game), new Phaser.Matrix().setTo(0.002294158935546875,-0.995758056640625,0.995758056640625,0.002294158935546875,0.09738922119140625,99.6731948852539));
ctx.fillStyle = ctx.createPattern(HorseshoeBitmap.getCanvas(), 'repeat');
drawPolygon(ctx, [{x:200, y:0},{x:0, y:0},{x:0, y:200},{x:200, y:200},{x:200, y:0}]);
ctx.fill();
}
var HorseshoeCircle_shape5 = game.make.sprite(0, 0, HorseshoeCircle_shape5BD);
group.addMultiple([HorseshoeCircle_shape1,HorseshoeCircle_shape2,HorseshoeCircle_shape3,HorseshoeCircle_shape4,HorseshoeCircle_shape5]);
return group;
}
})(lib = lib||{});
var lib;Usage:
var game = new Phaser.Game(lib.properties.width, lib.properties.height, Phaser.AUTO, '', {preload: preload, create: create, update: update });
function preload() {
game.load.atlas(lib.properties.atlas.name, lib.properties.atlas.image, lib.properties.atlas.metadata);
}
function create() {
game.stage.backgroundColor = lib.properties.color;
game.add.existing(lib.RabbitLegAward(game, 250, 250));
}
function update() {
}