Branding
Branding
Below are links to assorted PixiJS branding assets usable for including on your site, game, or app. All assets here are free-to-use. If you have any questions or requests, please file an issue.
Banner
This is the banner that is displayed at the top of our README.
diff --git a/7.x/examples.html b/7.x/examples.html index 417c1ed20..da2ea75bc 100644 --- a/7.x/examples.html +++ b/7.x/examples.html @@ -1,4 +1,4 @@ -Examples
Examples
Welcome to the PixiJS Examples page! Here you can find a variety of demos and code snippets to help you get started with PixiJS.
Check out some of our featured examples below:
-
diff --git a/7.x/examples/advanced/collision-detection.html b/7.x/examples/advanced/collision-detection.html
index b185ea85d..542967bf0 100644
--- a/7.x/examples/advanced/collision-detection.html
+++ b/7.x/examples/advanced/collision-detection.html
@@ -1 +1 @@
-
Collision Detection
Collision Detection
Mouse Trail
Mouse Trail
Scratch Card
Scratch Card
Screen Shot
Screen Shot
Slots
Slots
Spinners
Spinners
Star Warp
Star Warp
Async
Async
Background
Background
Bundle
Bundle
Multiple
Multiple
Promise
Promise
Blend Modes
Blend Modes
Cache As Bitmap
Cache As Bitmap
Container
Container
Particle Container
Particle Container
Simple Plane
Simple Plane
Tinting
Tinting
Transparent Background
Transparent Background
Click
Click
Custom Hitarea
Custom Hitarea
Custom Mouse Icon
Custom Mouse Icon
Dragging
Dragging
Interactivity
Interactivity
Logger
Logger
Nested Boundary With Projection
Nested Boundary With Projection
Pointer Tracker
Pointer Tracker
Slider
Slider
Custom
Custom
Mouse Blending
Mouse Blending
Shader Toy Filter Render Texture
Shader Toy Filter Render Texture
Blur
Blur
Color Matrix
Color Matrix
Displacement Map Crawlies
Displacement Map Crawlies
Displacement Map Flag
Displacement Map Flag
Advanced
Advanced
Dynamic
Dynamic
Simple
Simple
Filter
Filter
Graphics
Graphics
Sprite
Sprite
Instanced Geometry
Instanced Geometry
Interleaving Geometry
Interleaving Geometry
Merging Geometry
Merging Geometry
Multi Pass Shader Generated Mesh
Multi Pass Shader Generated Mesh
Shader Toy Mesh
Shader Toy Mesh
Shared Shader
Shared Shader
Sharing Geometry
Sharing Geometry
Textured Mesh Advanced
Textured Mesh Advanced
Textured Mesh Basic
Textured Mesh Basic
Triangle Color
Triangle Color
Triangle Textured
Triangle Textured
Triangle
Triangle
Uniforms
Uniforms
Basic
Basic
Animated Sprite Animation Speed
Animated Sprite Animation Speed
Animated Sprite Explosion
Animated Sprite Explosion
Animated Sprite Jet
Animated Sprite Jet
Basic
Basic
Texture Swap
Texture Swap
Tiling Sprite
Tiling Sprite
Video
Video
Bitmap Text
Bitmap Text
From Font
From Font
Pixi Text
Pixi Text
Web Font
Web Font
Gradient Basic
Gradient Basic
Gradient Resource
Gradient Resource
Render Texture Advanced
Render Texture Advanced
Render Texture Basic
Render Texture Basic
Texture Rotate
Texture Rotate
FAQ
FAQ
What is PixiJS for?
Everything! Pixi.js is a rendering library that will allow you to create rich, interactive graphic experiences, cross-platform applications, and games without diff --git a/7.x/guides.html b/7.x/guides.html index a4e079772..d07766803 100644 --- a/7.x/guides.html +++ b/7.x/guides.html @@ -1,4 +1,4 @@ -
Welcome
Welcome
PixiJS is an open source, web-based rendering system that provides blazing fast performance for games, data visualization, and other graphics intensive projects. These guides are designed to be a companion to the API documentation, providing a structured introduction to using the API to solve problems and build projects.
About The Guides
If you're new to PixiJS, we suggest you start with the Basics and read through them in order (a good place to start is Getting Started). While PixiJS has a mature API and solid documentation, the guides go over many common issues and questions that developers new to the system encounter.
diff --git a/7.x/guides/basics/architecture-overview.html b/7.x/guides/basics/architecture-overview.html index bddb95936..4dd5cddee 100644 --- a/7.x/guides/basics/architecture-overview.html +++ b/7.x/guides/basics/architecture-overview.html @@ -1,4 +1,4 @@ -Architecture Overview
Architecture Overview
OK, now that you've gotten a feel for how easy it is to build a PixiJS application, let's get into the specifics. For the rest of the Basics section, we're going to work from the high level down to the details. We'll start with an overview of how PixiJS is put together.
The Code
Before we get into how the code is layed out, let's talk about where it lives. PixiJS is an open source product hosted on GitHub. Like any GitHub repo, you can browse and download the raw source files for each PixiJS class, as well as search existing issues & bugs, and even submit your own. PixiJS is written in a JavaScript variant called TypeScript, which enables type-checking in JavaScript via a pre-compile step.
diff --git a/7.x/guides/basics/getting-started.html b/7.x/guides/basics/getting-started.html index 43d97ef7f..c4e946b2c 100644 --- a/7.x/guides/basics/getting-started.html +++ b/7.x/guides/basics/getting-started.html @@ -1,4 +1,4 @@ -Getting Started
Getting Started
In this section we're going to build the simplest possible PixiJS application. In doing so, we'll walk through the basics of how to build and serve the code.
Advanced Users
A quick note before we start: this guide is aimed at beginning PixiJS developers who have minimal diff --git a/7.x/guides/basics/render-loop.html b/7.x/guides/basics/render-loop.html index ca4265737..3d25f738c 100644 --- a/7.x/guides/basics/render-loop.html +++ b/7.x/guides/basics/render-loop.html @@ -1,4 +1,4 @@ -
Render Loop
Render Loop
Now that you understand the major parts of the system, let's look at how these parts work together to get your project onto the screen. Unlike a web page, PixiJS is constantly updating and re-drawing itself, over and over. You update your objects, then PixiJS renders them to the screen, then the process repeats. We call this cycle the render loop.
The majority of any PixiJS project is contained in this update + render cycle. You code the updates, PixiJS handles the rendering.
Let's walk through what happens each frame of the render loop. There are three main steps.
diff --git a/7.x/guides/basics/scene-graph.html b/7.x/guides/basics/scene-graph.html index 06c6e7538..b3da683c3 100644 --- a/7.x/guides/basics/scene-graph.html +++ b/7.x/guides/basics/scene-graph.html @@ -1,4 +1,4 @@ -Scene Graph
Scene Graph
Every frame, PixiJS is updating and then rendering the scene graph. Let's talk about what's in the scene graph, and how it impacts how you develop your project. If you've built games before, this should all sound very familiar, but if you're coming from HTML and the DOM, it's worth understanding before we get into specific types of objects you can render.
The Scene Graph Is a Tree
The scene graph's root node is a container maintained by the application, and referenced with app.stage. When you add a sprite or other renderable object as a child to the stage, it's added to the scene graph and will be rendered and interactable. Most PixiJS objects can also have children, and so as you build more complex scenes, you will end up with a tree of parent-child relationships, rooted at the app's stage.
What PixiJS Is Not
What PixiJS Is Not
While PixiJS can do many things, there are things it can't do, or that require additional tools to accomplish. Newcomers to PixiJS often struggle to identify which tasks PixiJS can solve, and which require outside solutions. If you're about to start a project, it can be helpful to know if PixiJS is a good fit for your needs. The following list is obviously incomplete - PixiJS is also not, for example, a duck - but it includes many common tasks or features that you might expect us to support.
PixiJS Is Not ... A Framework
PixiJS is a rendering engine, and it supports additional features such as interaction management that are commonly needed when using a render engine. But it is not a framework like Unity or Phaser. Frameworks are designed to do all the things you'd need to do when building a game - user settings management, music playback, object scripting, art pipeline management... the list goes on. PixiJS is designed to do one thing really well - render graphical content. This lets us focus on keeping up with new technology, and makes downloading PixiJS blazingly fast.
diff --git a/7.x/guides/basics/what-pixijs-is.html b/7.x/guides/basics/what-pixijs-is.html index 2e5303ea7..08e3d7b85 100644 --- a/7.x/guides/basics/what-pixijs-is.html +++ b/7.x/guides/basics/what-pixijs-is.html @@ -1,4 +1,4 @@ -What PixiJS Is
What PixiJS Is
So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch events. It is a natural replacement for Flash in the modern HTML5 world, but provides better performance and pixel-level effects that go beyond what Flash could achieve. It is perfect for online games, educational content, interactive ads, data visualization... any web-based application where complex graphics are important. And coupled with technology such as Cordova and Electron, PixiJS apps can be distributed beyond the browser as mobile and desktop applications.
Here's what else you get with PixiJS:
PixiJS Is ... Fast
diff --git a/7.x/guides/components/assets.html b/7.x/guides/components/assets.html index fe59e9920..b77d52ab0 100644 --- a/7.x/guides/components/assets.html +++ b/7.x/guides/components/assets.html @@ -1,4 +1,4 @@ -Assets
Assets
The Assets package
The Assets package is a modern replacement for the old PIXI.Loader class. It is a promise-based resource management solution that will download, cache and parse your assets into something you can use. The downloads can be simultaneous and in the background, meaning faster startup times for your app, the cache ensures that you never download the same asset twice and the extensible parser system allows you to easily extend and customize the process to your needs.