HTML5 Canvas Core technology-graphics, animation and game development. Pdf8

6th Chapter Wizard

Sprite, which is an image object that can be integrated into an animation, gives them a variety of behaviors that are not part of the canvas API, but are derived from it

This chapter will implement three design patterns: Policy mode (Sprite and renderer decoupling), Command mode (Sprite action), and enjoy meta mode (one instance represents multiple sprites)

The Painter property is a reference to the painter object, using the Paint (Sprite,context) method to draw the sprite, the behaviors attribute points to an array of objects, and each object in the array will be execute (sprite,context , time) method to perform some form of operation on the sprite.

The Sprite object has two methods to paint () with update (), the update () method performs the sprite's behavior, the order of execution is the order of the addition, and the paint () method will be the wizard's drawing agent to the renderer to do

All painter objects can be categorized into the following three categories: stroke and fill paint, image carvers, Sprite table carvers

The Sprite object does not need to finish drawing itself, it will delegate the drawing operation to another object. Essentially, the painter object is a drawing algorithm that can be used interchangeably with each other.

A picture contains animation of each frame of the picture, called the Sprite table (sprite sheet), copying a picture than copying more than one picture speed is much faster

Chapter 7th Physical Effects

Analog acceleration 9.81m/s² converted to pixels/m

Vertical speed of parabolic object

Pendulum movement

Time axis distortions are those attributes (position, color, and so on) that are non-linear with time.

The 8th Chapter Collision detection

Separation axis theorem, also called hyper-plane separation theorem, SAT

External graphics discriminant: When performing collision detection in a two-dimensional plane, it is usually determined based on the area of the object's external graph (three-dimensional space according to volume)

External Rectangle discriminant Method: The external rectangle is often used as the contour of the object to participate in collision detection

Prior collision detection, it is possible to detect collisions in advance, as this is estimated based on the current frame rate, and if the frame rate changes, an error occurs.

Circumscribed Circle Discriminant Method: The distance of two centers is less than two circle radius only and

Post-collision detection method, after the collision is done in the judgment (whether the collision has occurred)

Ray Casting method, judging by the intersection of two lines

The above method is not suitable for collision detection between freeform, separation axis theorem (SAT) and least squares vector (MTV), the separation axis theorem applies only to convex polygons (all internal angles are less than 180°)

The separation axis theorem (SAT) is equivalent to casting the shadow of an object on a wall, the shadow overlapping the collision, the shadow part mathematically called the projection, the wall called the axis

As long as the separate projection is found on any one of the axes, the detection process can be terminated immediately to determine that no collision has occurred

Projection axes

The vector p1 points to P2 is called the edge vector, and a normal vector perpendicular to the edge vector, called the Edge normal vector, is also required.

Round and polygon collision detection, the circle can be approximated as a regular polygon with countless edges

The least moving vector, which is the minimum distance required to no longer collide with another object

Bounce off when you hit it.

--------------------Code part post-processing--------------------

The end of the book