Just before dawn, there is always a dark time, quietly work hard you will surprise everyone. You don’t have to turn against the wind, but please be born to the sun; You know what? Dream, is the dream want to do, wake up, try to achieve; The so-called abyss, down, but also a future. Hey, friend. The world may not be beautiful, but you are good enough. The future may not be bright, but it must be full of possibilities. May you live up to your youth, live up to yourself and be a natural and unrestrained person.

preface

Next, I will publish a series of PixiJS articles, aiming to help those who want to know PixiJS better understand and learn. (After all, PixiJS’s official website is in English.)

What is PixiJS? What can be done? What can’t you do? So that readers have a clearer choice.

What exactly is PixiJS?

HTML5 creation engine. The fastest and most flexible 2D WebGL renderer.

To elaborate: At the heart of PixiJS is a rendering system that uses WebGL (or Canvas) to display images and other 2D visual content. It provides complete scene diagrams (hierarchies of objects to render) and interactive support to enable handling of click and touch events. It is the natural alternative to Flash in the modern HTML5 world, but offers better performance and pixel-level effects than Flash can achieve. It’s great for online games, educational content, interactive advertising, data visualization… Any Web-based application that requires complex graphics. Coupled with technologies such as Cordova and Electron, PixiJS applications can be distributed outside the browser as mobile and desktop applications.

The strength of the Pixi API is its versatility: it’s not just a game engine. It gives you complete freedom to make whatever you like with it, even to build your own game engine.

The characteristics of PixiJS

There are many rendering engines out there, many of them better than PixiJS, but why do so many people still use PixiJS? That’s because PixiJS has features that many other engines don’t. The following are introduced in turn.

Very soon, very soon!

PixiJS is a very fast 2D Sprite rendering engine. One of the main differences between it and other Web-based rendering solutions is speed. Starting at the bottom, the rendering pipeline is set up to give you as much performance as possible in the browser. Whether it’s automatic batch processing of sprites and geometry, or detailed WebGL resources and compact scene diagrams, your application can run very fast.

It’s not just Sprites

Drawing images on a page can be handled using HTML5 and DOM, so why use PixiJS? Performance aside, the answer is that PixiJS goes far beyond simple graphics. Draw paths and tracks using SimpleRope. Use Graphics to draw polygons, lines, circles, and other primitives. Text provides full-text rendering support with the same high performance as Sprite. Even when drawing simple images, PixiJS itself supports Spritesheets for efficient loading and easy development.

WebGL localization

WebGL is a JavaScript API for accessing a user’s GPU for fast rendering and advanced effects. PixiJS leverages WebGL to efficiently display thousands of mobile sprites, even on mobile devices. But using WebGL provides more than just speed. By using the Filter class, you can write shader programs (or use pre-built programs!). To achieve displacement mapping, blurriness, and other advanced visual effects that simply cannot be achieved using the DOM or Canvas API.

Open source

PixiJS, is a mature project with full source code access. We can get a COMPATIBILITY license from MIT and host it on GitHub for problem tracking and easy access.

extensible

The real reason PixiJS is so easy to extend is the clean internal API. After years of development and 5 major versions, PixiJS can be perfectly integrated into your project no matter what it is. How do I put this? It is not particularly friendly to beginners, and will give a feeling that the API is incomplete.

Easy to deploy

Flash needs a player. Unity requires an installation or app store. PixiJS requires only a browser. Deploying PixiJS on the network is like deploying a web site. The user just needs to visit a URL and your game or other content is up and running. But PixiJS is much more than just the web. If you want to deploy a mobile application, you need to wrap the PixiJS code in Cordova. If you need to deploy standalone desktop applications, you need to build an Electron wrapper.

What can’t PixiJS do?

While PixiJS has many advantages, it also has some things it can’t do on its own. When we choose a tool, we must know what the tool can and cannot do. In case we choose a tool that doesn’t fulfill our needs, we’re screwed. So let’s take a look at some of the “downsides” of PixiJS.

Not a framework

PixiJS aims to do one thing very well — render graphical content. This allows us to focus on keeping up with new technologies and making PixiJS download very fast. PixiJS is not a framework like Unity or Phaser. The framework is designed to do all the things you need to do when building your game — user setup management, music playback, object scripting, art pipeline management, and more.

It’s not a 3D renderer

PixiJS is a 2D renderer. Platform games, adventure games, interactive ads, custom data visualizations, and more. But if you want to render a 3D model, that’s not possible, check out Babiel.js or three.js.

Mobile apps have limitations

PixiJS works well for mobile applications, but if you want to access native bindings, you need to use a deployment system like Apache Cordova. PixiJS does not provide access to cameras, location services, notifications, and so on.

There is no UI library

Building a truly universal UI system has been a big challenge for PixiJS, which unlike Unity has its own UI library. PixiJS chose to avoid complexity in order to stay true to its core focus on speed. While it is possible to build your own UI library using PixiJS’s scene diagram and interaction manager, PixiJS does not provide a UI library out of the box.

Data is stored

There are a number of techniques that users can use to implement storage Settings. Cookies, Web Storage, server-based Storage, etc., all have their advantages and disadvantages. Users can use any of them with PixiJS, but PixiJS does not provide the tools to do so.

Audio library

Audio libraries are supported in PixiJS, but not out of the box. Web audio technology is constantly evolving, and the rules of many browsers are constantly changing. There are many dedicated web audio libraries, such as Howler.js that can be used with PixiJS to play audio and video, and the PixiJS Sound plug-in that works well with PixiJS.

The development environment

There are many tools available to build 2D art and games with PixiJS, but these tools are not part of PixiJS, PixiJS is just a rendering engine with no development environment of its own. There are tools for packaging Sprite tables, manipulating images, building MipMaps or Retina-ready sprites. I’ll list the tools where appropriate in a later article.

Series of articles, brothers can collect columns, so that systematic learning, of course, don’t forget to like 👍 👍 👍