Skip to content

Commit a70ee2e

Browse files
bitnenferbitnenfer
committed
Update command list for graphics rendering
1 parent 6648543 commit a70ee2e

3 files changed

Lines changed: 129 additions & 21 deletions

File tree

‎v3/src/gameobjects/graphics/Commands.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
module.exports = {
22
ARC: 0,
3-
BEGIN_FILL: 1,
4-
END_FILL: 2,
5-
DRAW_CIRCLE: 3,
6-
DRAW_RECT: 4,
3+
BEGIN_PATH: 1,
4+
CLOSE_PATH: 2,
5+
FILL_CIRCLE: 3,
6+
FILL_RECT: 4,
77
LINE_TO: 5,
8-
MOVE_TO: 6
8+
MOVE_TO: 6,
9+
LINE_STYLE: 7,
10+
STROKE_CIRCLE: 8,
11+
STROKE_RECT: 9,
12+
FILL_PATH: 10,
13+
STROKE_PATH: 11
914
};

‎v3/src/gameobjects/graphics/Graphics.js‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,76 @@ var Graphics = new Class({
3131
);
3232
},
3333

34-
beginFill: function (color)
34+
lineStyle: function (lineWidth, color, alpha)
3535
{
3636
this.commandBuffer.push(
37-
Commands.BEGIN_FILL,
38-
color
37+
Commands.LINE_STYLE,
38+
lineWidth, color, alpha
3939
);
4040
},
4141

42-
endFill: function ()
42+
fillStyle: function (color, alpha)
4343
{
44+
alpha = (alpha !== undefined ? alpha : 1);
4445
this.commandBuffer.push(
45-
Commands.END_FILL
46+
Commands.FILL_STYLE,
47+
color, alpha
4648
);
4749
},
4850

49-
drawCircle: function (x, y, radius)
51+
beginPath: function ()
52+
{
53+
this.commandBuffer.push(
54+
Commands.BEGIN_PATH
55+
);
56+
},
57+
58+
closePath: function ()
59+
{
60+
this.commandBuffer.push(
61+
Commands.CLOSE_PATH
62+
);
63+
},
64+
65+
fillPath: function ()
66+
{
67+
this.commandBuffer.push(
68+
Commands.FILL_PATH
69+
);
70+
},
71+
72+
strokePath: function ()
73+
{
74+
this.commandBuffer.push(
75+
Commands.STROKE_PATH
76+
);
77+
},
78+
79+
fillCircle: function (x, y, radius)
80+
{
81+
this.commandBuffer.push(
82+
Commands.DRAW_CIRCLE,
83+
x, y, radius
84+
);
85+
},
86+
87+
fillRect: function (x, y, width, height)
88+
{
89+
this.commandBuffer.push(
90+
Commands.DRAW_RECT,
91+
x, y, width, height
92+
);
93+
},
94+
95+
strokeCircle: function (x, y, radius)
5096
{
5197
this.commandBuffer.push(
5298
Commands.DRAW_CIRCLE,
5399
x, y, radius
54100
);
55101
},
56102

57-
drawRect: function (x, y, width, height)
103+
strokeRect: function (x, y, width, height)
58104
{
59105
this.commandBuffer.push(
60106
Commands.DRAW_RECT,

‎v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js‎

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
1616
var commandBuffer = src.commandBuffer;
1717
var ctx = renderer.currentContext;
1818
var value;
19+
var lineAlpha = 1.0;
20+
var fillAlpha = 1.0;
21+
var lineColor = 0;
22+
var fillColor = 0;
23+
var lineWidth = 1.0;
24+
var red = 0;
25+
var green = 0;
26+
var blue = 0;
1927

2028
// Blend Mode
2129
if (renderer.currentBlendMode !== src.blendMode)
@@ -61,18 +69,41 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
6169
);
6270
index += 6;
6371
break;
64-
case Commands.BEGIN_FILL:
65-
value = commandBuffer[index + 1];
66-
ctx.fillStyle = 'rgb(' + ((value & 0xFF0000) >>> 16) + ',' + ((value & 0xFF00) >>> 8) + ',' + (value & 0xFF) + ')';
72+
case Commands.LINE_STYLE:
73+
lineWidth = commandBuffer[index + 1];
74+
lineColor = commandBuffer[index + 2]
75+
lineAlpha = commandBuffer[index + 3];
76+
index += 3;
77+
break;
78+
case Commands.FILL_STYLE:
79+
fillColor = commandBuffer[index + 1];
80+
fillAlpha = commandBuffer[index + 2];
81+
index += 2;
82+
break;
83+
case Commands.BEGIN_PATH:
6784
ctx.beginPath();
68-
index += 1;
6985
break;
70-
case Commands.END_FILL:
71-
ctx.fill();
86+
case Commands.CLOSE_PATH:
7287
ctx.closePath();
73-
ctx.fillStyle = '#fff';
7488
break;
75-
case Commands.DRAW_CIRCLE:
89+
case Commands.FILL_PATH:
90+
red = ((fillColor & 0xFF0000) >>> 16);
91+
green = ((fillColor & 0xFF00) >>> 8);
92+
blue = (fillColor & 0xFF);
93+
ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
94+
ctx.globalAlpha = fillAlpha;
95+
ctx.fill();
96+
break;
97+
case Commands.STROKE_PATH:
98+
red = ((lineColor & 0xFF0000) >>> 16);
99+
green = ((lineColor & 0xFF00) >>> 8);
100+
blue = (lineColor & 0xFF);
101+
ctx.strokeStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
102+
ctx.globalAlpha = fillAlpha;
103+
ctx.lineWidth = lineWidth;
104+
ctx.stroke();
105+
break;
106+
case Commands.FILL_CIRCLE:
76107
ctx.beginPath();
77108
ctx.arc(
78109
commandBuffer[index + 1],
@@ -85,7 +116,7 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
85116
ctx.closePath();
86117
index += 3;
87118
break;
88-
case Commands.DRAW_RECT:
119+
case Commands.FILL_RECT:
89120
ctx.fillRect(
90121
commandBuffer[index + 1],
91122
commandBuffer[index + 2],
@@ -94,6 +125,31 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
94125
);
95126
index += 4;
96127
break;
128+
case Commands.STROKE_CIRCLE:
129+
ctx.beginPath();
130+
ctx.arc(
131+
commandBuffer[index + 1],
132+
commandBuffer[index + 2],
133+
commandBuffer[index + 3],
134+
0,
135+
PI2
136+
);
137+
ctx.stroke();
138+
ctx.closePath();
139+
index += 3;
140+
break;
141+
case Commands.STROKE_RECT:
142+
ctx.beginPath();
143+
ctx.rect(
144+
commandBuffer[index + 1],
145+
commandBuffer[index + 2],
146+
commandBuffer[index + 3],
147+
commandBuffer[index + 4]
148+
);
149+
ctx.stroke();
150+
ctx.closePath();
151+
index += 4;
152+
break;
97153
case Commands.LINE_TO:
98154
ctx.lineTo(
99155
commandBuffer[index + 1],
@@ -108,6 +164,7 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
108164
);
109165
index += 2;
110166
break;
167+
111168
default:
112169
console.error('Phaser: Invalid Graphics Command ID ' + commandID);
113170
break;

0 commit comments

Comments
 (0)