/
sprite-properties.js
161 lines (144 loc) · 4.41 KB
/
sprite-properties.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
// This reproduces what is done in Flash in
// assets/swf/with-actionscript/no-swf/Sprite-properties/
// and it tries to "fix" or adapt the values so that they work in bs
// this is basically the case study for understanding how to
// change values between flash and bonsai.
var stageWidth = 700;
var stageHeight = 600;
var gridDist = 100;
// Move the entire movie a bit down and right, so it is easier to read
stage = new Group().addTo(stage);
stage.attr({x:20, y:20});
// Draw a grid.
for (var i=0; i<stageWidth; i+=10){
new Path().addTo(stage)
.attr({strokeWidth:1, strokeColor:'black', opacity:i%gridDist==0 ? 0.5 : 0.2})
.moveTo(0, i)
.lineTo(stageHeight, i);
}
for (var i=0; i<stageHeight; i+=10){
new Path().addTo(stage)
.attr({strokeWidth:1, strokeColor:'black', opacity:i%gridDist==0 ? 0.5 : 0.2})
.moveTo(i, 0)
.lineTo(i, stageWidth);
}
function renderAndApplyProperties(props){
renderAndApplyProperty(props);
}
var _x = 0;
var _y = 20;
var colors = [0x0000FF, 0x00FF00, 0xFF0000, 0xFF00FF, 0xFFFF00, 0x00F0F0];
var colorIndex = 0;
function renderAndApplyProperty(props){
var color = colors[colorIndex++ % colors.length] * 256 + 0xFF;
var sprite = drawExamplePath(color);
var position = -10;
var posOffset = 15;
for (var i=0; i<props.length; i++) {
var prop = props[i];
var bsProp = fixPropertyForBonsai(sprite, prop[0], prop[1]);
if (bsProp.value!='CANT DO'){
sprite.attr(bsProp.name, bsProp.value);
writeInfo(prop[0], _x, _y+position);
position = position + posOffset;
writeInfo(prop[1], _x, _y+position);
position = position + posOffset;
} else {
writeCantDo('NOT in bs', _x, _y+position);
position = position + posOffset;
writeCantDo(prop[0], _x, _y+position);
position = position + posOffset;
sprite.clear();
}
}
_x += gridDist;
if (_x+gridDist >= stageWidth){
_y += gridDist;
_x = 0;
}
}
function fixPropertyForBonsai(sprite, name, value){
var convertedProp = {name:name, value:value};
var cantDo = [
'rotationX', 'rotationY', 'blendMode',
'opaqueBackground', 'z', 'scaleZ'
];
if (cantDo.indexOf(name)!=-1){
convertedProp.value = 'CANT DO';
} else
if (name=='rotation' || name=='rotationZ') {
convertedProp.value = value / 360 * Math.PI*2;
convertedProp.name = 'rotation';
} else if (name=='width'){
// convertedProp.name = 'scaleX';
// todo....we need to be able to read the width :(
// convertedProp.value = sprite.attr();
} else if (name=='alpha'){
convertedProp.name = 'opacity';
} else if (name=='visible'){
convertedProp.name = 'opacity';
convertedProp.value = value ? 1 : 0;
}
return convertedProp;
}
function drawExamplePath(color){
var sprite = new Movie()
.attr({x:_x, y:_y})
.addTo(stage)
.addChild(
new Rect(0, 0, 50, 50)
.attr({fillColor:color, lineWidth:2, lineColor:'black'})
);
return sprite;
}
function writeCantDo(textString, x, y){
var text = new Text(textString)
.attr({textFillColor:'red', fontWeight:'bold', x:x, y:y, opacity:0.7})
.addTo(stage);
}
function writeInfo(textString, x, y){
var text = new Text(textString)
.attr({textFillColor:'black', x:x, y:y, opacity:0.7})
.addTo(stage);
// the following properties dont exist in bs yet
// text.backgroundColor = 0xFFFFFF;
// text.background = true;
// text.autoSize = flash.text.TextFieldAutoSize.LEFT;
}
var square = Path.rect(0, 0, 10, 10).attr({fillColor:'0x0000FF'});
[
[['blendMode', 'flash.display.BlendMode.SUBTRACT']],
[['alpha', 0.1]],
[['alpha', 0.5]],
[],//TODO [['filters', [new flash.filters.BlurFilter(20)]]],
[['rotation', 2]],
[['rotation', 5], ['rotation', 0]],
[['rotation', 5], ['rotation', -5]],
[['rotation', -2]],
[['rotationX', 20]],
[['rotationX', -20]],
[['rotationY', 20]],
[['rotationY', -20]],
[['rotationZ', 3]],
[['rotationZ', -3]],
[],//TODO [['mask', square]], // doenst render anything, somehow ?? :(
[['scaleX', 2]],
[['scaleX', 1.5], ['scaleX', 0.9]],
[['scaleY', 0.5]],
[['scaleZ', -10]],
[['opaqueBackground', 0x0000FF]],
[['height', -10]],
[['visible', false], ['alpha', 0.5], ['visible', true]],
[['visible', false]],
[['width', 90]],
[['width', 20]],
[['width', 1]],
[['width', 104]],
[['x', 20]],
[['x', -10]],
[['y', 20]],
[['y', -2]],
[['z', -20]],
[['z', 20]]//*/
//*/
].forEach(renderAndApplyProperties);