Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use HTML5's Pixi.js, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use Pixi.js in HTML5. Let's take a look at it.

Pixi.js is an ultra-fast open source HTML5 2D rendering engine that uses WebGL with Canvas callback. As JavaScript's 2D renderer, Pixi aims to provide a fast and lightweight 2D library that is compatible with all devices. In addition, developers can feel the power of hardware acceleration without knowing WebGL.

As an open source HTML5 2D rendering engine, Pixi.js aims to provide developers with a fast and lightweight 2D library that is compatible with all devices. Can be compatible with all devices, to put it simply, cross-platform, in fact, when it comes to cross-platform development tools, there are many, the editor knows that the DevStore platform has included a lot.

Main characteristics

True cross-platform: today, it is not uncommon for development tools to cross-platform. However, Pixi.js is an ultra-fast HTML5 2D rendering engine that is compatible with all devices, and WebGL with Canvas callback function to achieve true cross-platform.

Interactive multi-touch: Pixi not only supports mobile and tablet devices, but also has complete multi-touch input recognition, allowing developers to realize their full potential.

WebGL filters: when using WebGL, Pixi allows you to use existing filters that you are familiar with. Of course, you can also use unique filters you create, such as self-positioning and halftone effects.

Shading and blending: this will be a favorite for designers. Pixi.js allows users to color and use blending modes just like other common visual packages such as Photoshop or Flash.

Renderer auto-detection: this is a feature of Pixi. Although Pixi is created primarily as a WebGL 2D renderer, it still supports non-WebGL platforms. The solution is to create a Canvas callback system where Pixi can seamlessly manage callbacks with only one encoding.

Simple API: the design is intuitive and easy to use.

Resource loading: wizard forms, graphics, fonts, and animation data can all be loaded and processed through Pixi.js.

Support for wizard forms (Sprite sheet).

What are the advantages of Pixi.js in terms of cross-platform features?

It is unique in that it has a WebGL with canvas callback, making it compatible with all devices and faster.

When using WebGL, Pixi allows you to use existing filters that you are familiar with. Of course, you can also use unique filters you create, such as self-positioning and halftone effects.

Pixi not only supports mobile and tablet devices, but also has complete multi-touch input recognition, giving developers the freedom to use their capabilities to tap its full potential. In addition, Pixi.js allows users to color and use blending modes.

But one of the biggest features of Pixi is the automatic detection of the renderer. Although Pixi was created primarily as the WebGL 2D renderer, it still supports non-WebGL platforms. The solution is to create a Canvas callback system where Pixi can seamlessly manage callbacks by coding once.

Whether the interface of a product is beautiful or not, the choice of rendering engine is really important.

Part of the sample page

Quick use

/ / create a stage for pixi

Var stage = new PIXI.Stage (0x222222)

/ / create a rendering

Var renderer = PIXI.autoDetectRenderer (400,300)

/ / add to the page

Document.body.appendChild (renderer.view)

RequestAnimFrame (animate)

The simplest pixi has been generated above, and the following game elements are created:

/ / create and add a footage

Var texture = PIXI.Texture.fromImage ("img/fist.png")

/ / use material to create an animation element

Var bunny = new PIXI.Sprite (texture)

/ / Center

Bunny.anchor.x = .5

Bunny.anchor.y = .5

/ / move to the center of the game screen

Bunny.position.x = 200

Bunny.position.y = 150

Stage.addChild (bunny)

Finally, there is the animation code:

Function animate () {

RequestAnimFrame (animate)

/ / add rotation effect

Bunny.rotation + = 0.1

/ / add zoom effect

If (bunny.scale.x > = 1) {

Scaleflag = 1

} else if (bunny.scale.x

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.