Pixi Powerups!

Rate this content
Bookmark
The video 'Pixi Powerups!' delves into the use of PixiJS for creating engaging visual effects. It starts by explaining how to create a Pixie renderer, which is essential for handling the rendering process of graphics. The video covers adding a background using Pixi, where a sprite object is created and added to the scene. The Pixie ticker object is highlighted for its role in handling animations by updating frames at a set rate. Viewers learn how to animate fishes in a Pixi scene by setting their positions and speeds, and using the ticker to update their movements. The Pixie Rope feature is introduced, showcasing how it distorts an image based on an array of points to create dynamic effects. The video also demonstrates how to implement Spine animations in Pixi by loading animation data and adding it to the scene. Pixi filters are discussed for applying effects like blur and displacement to objects. Finally, it explains how to capture and download images from a Pixie scene using render textures and the renderer's extract module.

From Author:

A look into Pixi.js coolest and lesser known features.

Including treats such as:

- Meshes

- Spine Animation

- Custom filters

- Render Textures and Image exporting


Showing example how it can make working with WebGL super easy and give your content that edge it needs to stand out!

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

A Pixie renderer is a component in Pixie used to handle the rendering process of graphics. To create a new Pixie renderer, you import the renderer from Pixie, set your desired width and height for the canvas, and then add the renderer's view to the DOM to start rendering your graphics.

To add a background in Pixie, you create a sprite object using a background image file (e.g., background.png). This sprite is then added to your scene to serve as the background.

The Pixie ticker object is used to handle animations by utilizing request animation frames. It allows you to add functions that will be called at a set frame rate (e.g., 60fps), enabling smooth animations and rendering within the Pixie environment.

In Pixie, you can animate fishes by creating sprite objects for each fish, setting their positions and speeds, and then using the ticker to update their positions based on their assigned speeds. This creates a dynamic scene where fishes move around realistically.

The Pixie Rope is a feature in Pixie that allows you to distort an image based on an array of points. It maps a texture onto these points, enabling the creation of dynamic and flexible visual effects, such as simulating movement or waves.

To implement Spine animations in Pixie, you first need to install the Pixie Spine plugin. Then, load the Spine animation data (e.g., a JSON file) using a loader, create a Spine object, set its position and animation, and add it to your scene.

Pixie filters are effects that can be applied to the scene or specific objects to alter their appearance, such as blurring or displacement effects. You create a filter, such as a blur or displacement filter, and assign it to the `filters` property of the scene or object.

To capture and download images, use a render texture to snapshot the scene or part of it. Then, use the renderer's extract module to convert this render texture into a canvas or image file. Finally, create a downloadable link for this image to enable users to save it.

Mat Groves
Mat Groves
30 min
09 Jun, 2021

Comments

Sign in or register to post your comment.

Video Transcription

Available in Español: ¡Potenciadores de Pixi!

1. Introduction to Pixie and Scene Creation

Short description:

Pixie power ups. Use Pixie to make nice effects and elevate your content. We'll create a scene using Pixie and explain the code and effects. It's like a budget Pokemon snap. Click on fishes to generate a Polaroid. Start by creating a new Pixie renderer. Set width, height, and add CSS for alignment. Create a stage, scene, and add them to the renderer. Use Pixie's ticker for animation frames. Build up the scene and explain the features. Make a background using a sprite object and texture.

Here are a few examples. Pixie power ups. These are cool features you can use in Pixie to make nice effects and elevate your content. We're going to do this today via example. We are going to make this scene using Pixie. I'm going to go through the code and explain what we're using and why to create the different effects.

This is basically like a budget Pokemon snap. You can click on the little fishes and it will generate a little Polaroid for you. Let's make this.

To start off with we're going to look at our code. Let's tidy this up. We'll go to index.ts. Here we go. To start off with we're going to create a new Pixie renderer. It's as straight forward as importing a renderer from Pixie. We get a new renderer, we set our width and height. It's just hard coded for ease today so we don't have to worry about resizing stuff. So, we create a renderer, then I just push a little bit of CSS in there that just makes this center aligned and scale nicely. Then we take the renderer's view which is basically the canvass element that Pixie's going to render into and we add that to the Dom.

Then we create a stage and a scene and we add the scene to the stage and their container a bit like a div element or a, you know, node in their Dom tree. Then we use Pixie's ticker object which is basically a nice easy way of using request animation frames. So we just add a function to this ticker and it means it's going to get called 60fps. And then what we do every frame is we just go renderer, render my stage and we end up with this. Well, not quite this. We end up with this, a lovely black screen. So let's go through and build up this scene and as we talk a bit about, as we hit features I'll give a little explanation on how they work.

So the first thing we want to do is we want to make a background. So if I just go in here, super straight forward. We just create a sprite object which is like Pixie's most basic thing. Here's a texture and then you can just put that texture in your scene and move it around and align it and stuff.

2. Adding Background, Fishes, and Foreground

Short description:

Add a background to the scene and create a lovely basic background. Then, create an array of fishes and loop through them to create fish sprites. Set the position, speed, and flip the fish based on its speed. Add the fish to the scene and push it to the fishes array. Use the ticker to move the fish and wrap around when reaching the edge. Add a foreground to the scene. Now we have a scene with a background, fishes, and foreground.

So we're not going to do anything. We're going to just other than just create one using this background PNG and then we're going to take our scene and we're going to add the background to the scene. And let's look at what that looks like. There we go. A lovely basic background.

Next we're going to add some fishes. So here is our making fishes function. So the first thing we do is we create an empty array of fishes. So this is where we're going to store a reference to all of our little fish. Then we're going to loop through 20 times and do sprite from and then we're going to use a fish asset. And basically the designer gave me seven fish assets so this will just basically use a different sprite up to seven. So it goes fish 1, 2, 3, 4, 5, 6, 7 and then loop around again. Once we've got a fish sprite we just set the anchor to be 0.5, 0.5, which just basically means that the center of this sprite object is going to be in the zero rather than the top left, which is the default. Next we set our position of our fishes, so we go this fish is gonna be an x-coordinate random width, so somewhere randomly in the width and then random height, minus 300 so that we don't end up, he doesn't end up going, the fishes don't end up being underground. We then assign a random speed, like plus and minus speed and then we flip the fish depending on his speed. So if it's going that way we scale it minus 1 and if it's going that way we just keep scale as 1. Then we take our fish, we add it to the scene and we push our fish to our fishes array. Now let's see how, what we get. We should get this. So every time I refresh I get some lovely little fishes, just moving around.

So next thing I'm gonna do is use the ticker again like we did before for rendering, but we're gonna use it to move our fish. So all we do is we go, loop through all of our fish, here's a fish, and we go, right, fish, add its speed. So it's just gonna move in the direction that it was assigned here. When we get to the edge, we just use a modular which means that it will just wrap around, so when it gets to one side it will wrap around to the other and vice versa. And let's run it now, there we go, we've got some swimming fish. Obviously the cool thing about Pixi is it's quite performance, so you can actually have quite a lot of fish and it's always gonna stay nice and smooth. That's a bit too many for us, we'll go back to 20 I think.

All right, so next thing we wanna do is add a foreground. So again, just like the background, really straightforward, add it to the scene. Oh, there we go, so now we've got background, fishes and foreground.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.