Shape of Alloyrenderingengine

Write in front

Do not read the article, only interested in the code can jump directly to here Https://github.com/AlloyTeam/AlloyGameEngine
Then star, thanks for the support:).

In the game or app, not all the places are stickers,Shape also has a very common application scenario, such as the game shows HP's Blood bar. A large number of shapes can make up a vector diagram. The advantage of vector diagram is that the amplification is not distorted, that is, the bitmap amplification distortion, the degree of distortion to see its platform interpolation algorithm of the Cow B degree, but the better the effect of the algorithm, the slower the speed, so most of the platform will be in the speed and effect of a compromise.

Drawing a shape root draw bitmap is not the same, drawing a bitmap can take full advantage of GPU rendering (or not), drawing shape must go through the CPU first mathematical calculation and graphics-related algorithms (such as you can try not to use the API, and use points to draw Bezier curves, circles, lines, etc., All the math you do is work with the computer, and then render. So obviously, drawing a lot of shape will cause the frame rate to drop.

What if you want to use shape and don't want to lower the frame rate?

The shape is drawn and the picture is drawn without conflict. Shape can be turned into a picture to render, similar to shape and text, text can also be converted to a picture and then draw to improve the frame rate, meaning:
1. Mathematical calculation and graph-related algorithms are performed by CPU first
2. Render to a backup canvas
3. The core loop in the game or app will draw the backup canvas directly, without having to recalculate
4. To update the backup canvas when shape has changed

It is important to note that the width of shape occupies the height.

Shape class

The Alloyrenderingengine has a built-in shape class for drawing geometric shapes.
Its API design is consistent with the context2d of the naming also canvas, different in with:
1. The method invocation mode of concatenating is used,
2. Finally, end () is called
3. Need to add to the stage

such as picturesque a circle:

(function(IS) {
varStage = is. Stage, Shape = is. Shape;
varstage =NewStage ("#ourCanvas");
varShape =NewShape (73, 76);
Shape.beginpath (). Arc (10,10,20, 0, Math.PI * 2). Fill (). end ();
Stage.add (Shape);
}) (IS);

As you can see, creating an instance of shape requires two parameters, one representing width and one representing high. Specifically why you want to pass these two parameters, please read it again from the beginning of the article:).
And so on Other methods are: MoveTo, lineTo, Beziercurveto, stroke, FillStyle, FillRect, clear, clearrect, etc...

Shape also has attributes such as scale, ScaleX, ScaleY, skewx, Skewy, rotation, x, y, and Alpha.

Give me a chestnut (mouse over the ball and then roll your rollers to try) Give me another chestnut (put your mouse on the tiger and then roll your rollers to try)

How did the roller event get dropped?

Stage.onmousewheel (function(EVT) {
if(Evt.delta > 0) {
Shape.scale + = 0.05;
}Else{
Shape.scale-= 0.05;
}
})

It's simple!

Github

Https://github.com/AlloyTeam/AlloyGameEngine
It is said that star will not be pregnant = =! Thanks for your support:)!

Shape of Alloyrenderingengine