Pixi Powerups!

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.

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.

Starting to get somewhere now. Right, first real Pixi power-up I wanna show you guys is the Pixi Rope. So the way this works is it's kind of like distorts an image based off an array of points. So I'm gonna show you guys what we're gonna do with the points, and then I'll show you how that actually maps to a texture.

So what I'm doing here is I'm going right... This is the segment length of my... The space between each point that I want and I'm creating a points array, and I'm looping through and just pushing in points. Now I've got this show debug points, which I won't go into, but all it does is returns a little visual of the points that I've just created and then we can see them being rendered every frame. And then I just sort of center it where we want our real to be and then I'm just gonna add this points view that I've made so that we can see essentially points on the scene. So if I refresh this now, there you go. So these are our points. Not that interesting just yet.

The next thing we want to do is we want to animate our points. So if I just show you guys this, what we do on the wire. So we add a ticker. So every frame, we increment a count, a little by a small amount and then we loop through our points and we just basically based on that eye position, based on the index, and we apply sine math to it. So what we end up with is the dots just moving up and down. Now just to make it extra cool, we also apply the same to the X. We apply a cos that just makes it sort of undulate a little bit. If I show you how that works, there you go. So now you can see there's almost just a slightly more interesting movement there. Obviously, moving points is all good. So you know, how is this useful to us? Well, the magic comes right now. So let's get rid of that point tree. We don't really need that. What we really want is one of Pixie's power-ups, the simple rope. So we create a new simple rope and we pass in a texture, and we're just going to use our ill texture, which is just a straight ill. And then we pass in the points that we made up here, and then we end up with an ill object, and we can just simply add that to the scene and position it just like we did the points before. And now you'll see what happens. There we go.

The points are basically distorting the texture, and the texture is basically mapping itself to the points. I've got a little screenshot of it here, basically. So this is it happening. This mass of the triangle is all being calculated for you by Pixie. You just say, here's my points, and then it will let you do these cool effects. And you can do tons of really cool stuff with ropes, especially if you introduce real physics.

Okay, let's keep rolling. The next one I want to show you guys is Spine support. So Pixie has support for something called Spine, which is a really amazing animation tool that, instead of keyframe-based, it basically records all the positions and animations in between of an animation made by a designer. And then, you can run that at runtime in Pixie. So here's an example here. And you can see there's just some really cool animations. The best thing is, is that the designers do all this work, we just load it in. I'm going to show you guys how to do that today.

So the first thing you need to do is, make sure you install the Pixie Spine plugin, which is the runtime. It's not bundled into the main Pixie. Then we just import it here. And then this is our Making a Spine function. So we create a Pixie Loader, which is the way that you can load anything in Pixie, really. And then we go Loader, Add, Crab. And then we pass in the JSON, which is the format of the spine animation. Then we call Load function, and when it's done, it gives a callback with the resource object. Now, that resource object has the crab, which we've defined here, and then pass in the spine data to essentially set up the animation. And this is our crab. And it's just like another Pixie object, you can just add that straight to the scene. So we get our crab, we set its position, and then we just set the animation to be animation, which is the name of the animation in the animation, which is cool. Then add that to the scene. And we should end up with a little crab. Now, this is really sweet, because all I did was load it in and add it and the designers kind of did all the work and had all the control. And it's a great way to work, because it means everyone can do their best at.

All right, next, I want to quickly show you guys the shine effect. So again, really basic, we're just adding a couple of God rays. So new sprite, add to scene, new sprite add to scene. And then every frame, we're just going to use a cause and sign again on a tick to basically just slide them along across each other a little bit just to give a bit of interesting movement. So this gives us, you can just about see them, they're a bit sort of dusty, but they're right there in the animation.

So what we can do is use one of Pixi's blend modes rather than rendering a normal style. We can use an add blend mode, which basically is an additive. It adds pixels as it draws rather than does the normal kind of alpha blend. There's a few different blend modes available on Pixi. A lot of them only work on canvas, but some of them, you know, quite a lot of the useful ones like overlay and multiply, they all work in WebGL too. So we're going to just use add and I'll show you what the difference that can make. There we go. It just looks much more like light and add always is always a great one to use if you want to make something, you know, light, light scene up.

OK, moving on, the next thing I want to show you guys is how to use Pixi filters. OK, so let's go in and check out the filters. All right. So. We're passing in our scene again, just like before, and this time we're going to create a new, we're going to import the filters object from Pixi, and we're going to create a new blur filter. Then for our scene, we just, every, every object in Pixi has a filters object that you can assign filters to. So here we just go filters is this blur and that's basically all it takes to create a filter and apply it to anything you want in Pixi. So if I just refresh this now. There you go. We've got a version that makes it very difficult to see what's going on, but proves the point. Um, so that's a useful filter, but here I want to show you guys a slightly more advanced one. So what we're going to do here is create the water ripple effect using what's called a displacement filter, which is another standard filter that is definitely one of my favorites. Um, and we use it wherever we can, but water basically shows off the best. So what we do is we create a water displacement. We load up a sprite from our water displacement, JPG. And then we, um, we set the base stitch to repeat, and then we set scale to be six. So it's quite big and takes over the screen, and then we add that displacement sprite to the scene.

So I'll show you guys what that looks like. There we go. So this is the displacements right? And the idea is that anything in the red channel shifts everything pixels X wise and anything in the green channel shift pixels on the Y. So yeah, not that interesting just yet. But if we then create a new displacement filter and we pass that sprite in, and then we set ourselves a strength of a hundred, we can then apply that filter just like we did the blur. There we go. Just like this. Now, if I refresh it now, you can see we're no longer rendering it, but we're actually using it as a filter input so you can see everything's kind of a little bit more ripply. Um, now to really sort of show you back to the extreme, there we go, that's what it can look like if you if you make it a bit nuts, but it kind of maybe doesn't look quite as good now. So let's put it back down to a thousand. And then the other cool thing you can do is now that we've got this sprite in our scene, I can just move it around and as it moves, it will displace pixels in a different way. So here we're going to basically go, here's us, here's our displacement sprite and then every frame, just move it up two pixels. And this is what happens when we do that. So now you can see it just looks like we've got this really lovely water grippy effect. Now you can do so much more with displacement filter, you can, I mean, you just change that texture to be something else and it will look completely different. You can change the strength, you can change the X strength, the Y strength. It's a really powerful filter. The other thing I'll just quickly show you guys is it's really easy to add multiple filters. So if you wanted to blur and a displacement filter, you just go like that and just pass in an array of multiple ones. If you wanted to blur it twice, you could even do that. So if I show you that now, there you go. That's like double blurred and with a displacement filter, we can even displace it again at the end. And it's so, yeah, so you can stack as many fields as you want. Now, obviously the more you add can have performance and implement performance implications, but generally speaking, you know, it should be all good. All right, moving on.

So this is just a really simple one. This is making adding a vignette. So a vignette graphic around which just frames the content. So if I show you this now, just that black edge just makes it look a bit more nice. Designers, our designers love to give me a vignette. Right.

So the next one I want to show you guys is the image capture stuff. So basically making this into the budget Pokemon go so Pokemon Snap that we talked about. So let's go in here and have a look around, have a look around and see what's going on.

So to make camera function essentially takes our scene and then image containers. So once we make a little part of words, that's the container we're going to add it into. But this is the scene that we're going to snapshot. So what we do is we create that to make our scene interactive. Once you've done that, you basically get the same events that you might get in there in the DOM. So pointed out when your events, touch events, mouse events, all that. So we go right scene, we want to be interactive and then we go, okay, listen for the pointed down and whenever we do this function will get called, right.

So here's our, here's our magic. Basically we create something called a render texture. So we just go render texture dot create and we give it a width and a height. So that's giving us a basically a 512 by 512, empty texture with the ability to us to add right pixels to it and do whatever we want and draw whatever we want to that. But yeah, it starts off blank. And then the other thing we do is create a matrix which is going to be used for when we say, Oh, we want to render the scene to this render texture. We want to say where, and that can be represented as a, as a matrix. So you don't have to fully, I guess, fully understand all this stuff, but it's, you know, you can do awesome. So the first thing we do is we set the TX and TY, which is like the translation of the matrix. So we get, when we render the scene I want to translate it by, this is actually the global mouse X and global mouse Y coordinates. So it means that I want this to be this, this mouse here basically says, wherever the user clicks, I want to render the scene with that point being the middle of the scene. This just caps that value. So it means that if, if we're too far off and part half of this is half of the capture is going to be off screen, and we just make sure that it doesn't go over that. Then we've created this, this is the magic line here, right? So we go renderer, .render, which we were doing before, we were doing it here, you know, renderer, .render stage, we do that every frame, and make camera, when you click we go renderer, .render, and then we pass in the scene.

Then we pass in the render texture, which is basically this is it says, this is what I want to render it to. So I'm going to render this scene to this, to this texture. Rather, if this is empty, then it renders to the screen. Otherwise it renders to this render texture. This is the clear property. Do we want to clear it true or false? Not really important here. And then the matrix. So like, what, how, you know, what parts should I draw and how should I transform that? So once we've got to here with that, we've now got a internal texture that we can then use and attach to sprites and stuff, and then just use as if it was another texture that we just loaded in.

All right, cool. So, so moving along, this is just a picture container. So this is how we can just represent this image and make it look like the little Polaroid. So we create a container and then I create the background, which is like the Polaroid frame. So it's just a white with a little black, white rectangle with a black rectangle behind it as a shadow. This is used using a pixie graphics object, which is like a really simple draw an API.

So I just super quickly walk through what we're doing here. So again, begin fill a zero black of an alpha of 0.3, then draw this rectangle. Then that's just an X, Y width and height. Then we begin another fill with a white fill and we draw the same rectangle again, but slightly offset. So that's how we're going to, that's our Polaroid drawing. Then we create a new Sprite and we pass in our render texture as the Sprite's main texture and we set the position and then we add the background and we add the Sprite to the picture. So that's our Polaroid. Then we add the picture to the image container. And then we just do some alignment, which isn't so important here.

Now, if I show you guys this now, whenever I click, you can see I can capture a lovely Pokemon Go style, sorry, Pokemon Snap style. And see if I can get this crab when he jumps. Come on crab, jump. There we go, perfect. So there you go. That's how you can use render textures to, you know, really do some cool stuff like taking pictures of things. So the final thing I want to show you guys is, right? It's all good having another image within your scene, but what if you want to download that image and actually just save it as a legit, real image. To do that, this is the code you need. And I'm just going to quickly walk you through that. So basically we have our renderer and that has a module on it called extract. So we just go renderer.extract, and there's a few different ways in which you can extract information. You can extract it as a canvas, as a base 64 encoded string, or even just a regular HTML image. But for us to be able to download it, the best thing for us to extract as is a canvas. So we go Hey, renderer, extract the canvas from this render texture. And that gives me back a regular canvas filled with the pixels from this render texture.

Now I've got this, I can call the two blob function, which basically is converting it to a base, a blob that's a JPEG. And this is the quality of the JPEG. And it's got a callback. And once that's done, I get given back my blob. Then I use a URL, create object URL, which gives me a URL that can basically be downloaded.

I create a link element. I set the href to be this image URL. I just set the download name. And then I append the link to a fake click. And then I remove the link. And that's it, that will download an image.

So I'm just going to show you that now. So there's me creating my images. And you can see my Chrome is starting to go a bit nuts downloading all these images for me. And I'll just show you guys those in motion. So here we go. You can see. There you go. Here's all my C shots that I can now share with all my friends and, you know, users desktop background or whatever crazy thing is you want to do.

All right, sweet. So that brings us to the end of the talk. If you want to have a play with this, with the scene, you can go here and you can just have a little fit around, take some pictures of the crab and the eel. But even cooler, you can just get this code. It's all open source. All the assets are open source. So you can get this code, download it, have a play, kind of get to understand it a little bit better. I know in 20 minutes is a bit brief to maybe jam all that stuff in. So here you can kind of have a proper look and take, you know, take your time.

Cool. Well, that's it.

Yeah. Follow me at Dormat23 on Twitter. If you want to be buddies, but yeah, thank you very much for taking the time to listen to me. Cheers. Thanks for joining.

The question was, which of these would you say is the most important developer trait outside of coding? And the winner, whoa, by far is communication with 49% followed with 39% for a positive attitude. Matt, what do you think about this? Do you agree?

Yeah, I think that's, I think that sounds about right. I think, um, I agree. Intelligence is definitely at the bottom because you can do all of this stuff without being naturally smart. I think grit is maybe slightly under, underrepresented because I think grit is like the substitute for intelligence. Like I don't consider myself particularly smart, but I do consider myself, uh, if I've got a problem, I'll keep chipping away. And I know eventually I can solve it. Which kind of means I don't, I don't have to make my brain bigger, which is quite difficult to do. Um, so I think, yeah, grit, grit is definitely important. But yeah, communication's above all right because we write code for humans. We talk with humans, we make things for humans. So everything needs to be for other people first and really the, the computer last. Yeah. Yeah. I actually wouldn't be surprised if positive attitude would be above. Because, well, if you got to be in a team, unless you're working alone, of course, but if you're going to be working in a team, being positive and being nice to work with is, well, even more important than your coding skills, I think. Uh, you can be, you can be the best coder, the fastest, the most secure, most accessible code writing person. But if you're not nice to be working with, then no one wants you in the team, right?

Totally true, man. Like, and it even scales to like projects and teams in general, right? It's like, you can make the same end result, but the journey that can be horrible and painful or lovely and, you know, respectful. And it's the same, you can get the same outcome, but that the team won't work with you again, they won't want to, you know, so it's yeah, definitely. Yeah, I guess they're all kind of, apart from intelligence, they're all kind of important. Yeah. Well, but your question was, but what is the most important thing? But your question was, but what is the most important? And we got down to that. Yeah. So everyone that's watching, I want to remind you that Matt's open for questions.

So go to the discord channel community track Q and A, if you have any questions for Matt about his talk. While people are typing, I was curious also about your journey into becoming a developer. Can you tell us a little bit about that?

Yeah, definitely. So I, I started to learn to code when I was quite young. My dad's a programmer. And we had an Atari ST. So he sort of showed me how to do really basic stuff, you know, like go, you know, endless loops and all that kind of stuff. And I did kind of end up writing a tiny little basic game where like it just moves the pixel across the screen and you press the button and it shot it. So that was my first stab at coding. And then I kind of put that away for years. Decided I wanted to be into art and drawing and all that kind of stuff.

So you built Space Invaders? It was like rubbish Space Invaders. Well, pretty cool. I was a kid, right? Yeah, yeah. I was, I was super happy with it. So, yeah. And then I kind of took a designer path, went to study, sort of studied, always studied computers and design at the same sort of thing. And then when I got to the industry, I sort of started off as a junior designer because that was what I thought I was best at. But as it turned out, there was this sweet spot that there's kind of like creative coding, which is kind of like you can do visual things, but you do it all through code. And so I started kind of getting into that side of things and that's when Flash was around and Flash was a really big, big thing.

So I kind of, you know, that whole time, you know, where people were just making crazy fun things. I kind of was just, you know, wanting to be part of that. And then, yeah, working in Flash until its demise and then switched gears to mobile games, was an iOS developer for a little bit. And then Javascript got really good all of a sudden with WebGL and all that and sort of switched back. And haven't looked back since. It seems to be the best platform out there for reaching more people. Yeah. Yeah. It's the Web is the most well Javascript is the most accessible language, I guess in the most devices, so that's true. That's funny.

It sounds really similar because I also actually, I wanted to be an animator, so I was animating in Flash. And at a certain point there were some things that I wanted to do that were repetitive. So I thought you could do this with code. There's this action script thingy. So go to and play, frame this and that. Yeah. And at a certain point is animations. Oh, the more and more I did, the more I wanted to automate and write code for it. And that's actually how I got into development. Yeah. I really knew that I wanted to do this. Yeah. Yeah.

I'm not too dissimilar. It definitely started off like it was Flash. It was all about just animating in the timeline. Go to and stop. Go to and play. And then, yeah, like then you realize you can code things and, and all of a sudden you kind of do this and then before you know it, you're writing more code than you are animating. And then, and then you've unlocked, you know, the ability to do like games and, and, and really crazy stuff. So, yeah, kind of, we need that back in the world, not Flash, but some creative tool that covers that. Yeah.

WYSIWYG JavaScript editor. Well, we have Dreamweaver. I don't know if that's still a thing, but. Yeah, I think the closest to the kind of gaming world is probably things like unity. Um, I know that there's some really cool engines out there as well, but kind of like play canvas, which is kind of like the web friendly version of, uh, you know, what unity is trying to do. So I think there is a space for game for game makers like that does exist, but yeah, it's a, unity to web is not mature yet. So it means that if you want to make web games, that's probably not the most viable option because you know, web is all about being teeny, tiny, very small and getting users in as quickly as possible. And I think these kinds of transpiled things right now that it's just a bit too, too cumbersome for the web, but that's just now in a year, that's all gonna change.

Yeah. I mean, tomorrow something could come out that makes it possible to port a unity game to JavaScript. So, yeah, I mean, you can do it like a, there, there, there is an export, like they, they do it published out to web GL and it's quite phenomenal. What you get is just for yeah, it's just high. It's quite demanding. So for, you know, the, the computer you would need is more demanding than the computer you'd need to run the native one, but there's loads of cool stuff in the web coming through, right? Like we've got web GPU coming through soon, which will be a whole new way of talking to the GPU, which is going to, you know, the last thing I read, it was a going to be up to two to eight times faster than web GL once it's, you know, If you remake the same thing, so even things like pixie will be able to remake it and have a web GPU vendor, which means that we'll be out to just get everything running even faster.