Recently I applied for a job and they asked me to develop a game using Pixi JS. In that moment I didn't even know what Pixi JS is but I managed to develop that game because of this tutorial and got my first job as developer. Thank you!
Thank you for such an amazing tutorial. I've watched the whole video while also coding but I didn't quite get some of the object's properties/methods around my head but I guess it's because it's my first time trying something like this. feels amazing. I have to explore & practice.
Did anyone else get to 27:00 and gut stuck on the line `const loader = PIXI.Loader.shared` ? With errors suggesting that Loader is not defined? I'm big confuse : everything else worked fine for me in this tutorial up to that point.
sorry. I cannot use english well. but i think you must change pixi.js version. In PixiJS 7, PIXI.Loader.shared is deprecated. So, if you change the version to 6 as shown in this video, the error will disappear. I hope this helps you solve the issue.
Haha man I LOVE that game! I have finished it multiple times on MegaDrive back in the day and I still play it on online emulators from time to time. Thank you!
Good stuff! I used the steps on the Webpack startup page so that I can use standard Node syntax and have a local environment with a dev server so I can use localhost:3000.
Thanks! Generally speaking, I highly recommend learning and using a bundler like Weback or Parcel even for people who are new to the world of web development. However, in this case where I assume you don't know how to use one so you had to go learn one then come back to learn Pixi. It would be easier if you just installed the LiveServer extension that I used in the tutorial so that you focus on one only thing. Anyways, you did what it seemed right for you and it worked fine so that's a win I guess.
2:10 If this doesn't work for somebody, try this: Start(); async function Start() { const app = new PIXI.Application(); await app.init({ width: 640, height: 360 }); document.body.appendChild(app.canvas); }
ok, i finished your video and i wanna tell you THANK YOU. The only "bad thing" i found, is that "loader" didn't work, so in the last minutes, i'm not strong enough to let the dragon "fly". Also the music gave me problem after i installed howler. It did not sound at all on me :( maybe my foult but nothing found in console about it :S
First thanks for your effort! PIXI seems more intuitive for me as Phaser. But a Question at 32:98 : I honestly don't understand that behavior. Yes, it points to the same texture object, but you have set a different rectangle. So I assumed it just copied this other part from the texture bitmap. Intuitively, it seems inefficient to me in this way to load a whole new instance of a texture of the *same* bitmap into memory.
Hi! First of all, thank you for this tutorial. It really introduces the basics of Pixi JS and prepares us for doing more. However, I have come across a few problems. I wonder if it occured to others to and I am hoping I can find some solutions. 1. The loader.shared class/function is not working for me, no matter what I try. It says cannot read properties of undefined (reading 'shared') pixijs 2. The graphics extra pack was not working either, and I proceeded as in the video. The star and the other thing would not appear and no error was given either.
I was stuck on the loader part and got the error "reading shared", in PIXI v7 they removed the loader and added Assets and Sprite. Just a heads up for anyone else stuck!
This is how i have my 'setup' function now: const loader = PIXI.Assets const Sprite = PIXI.Sprite async function setup (resource, spriteName){ let texture = await loader.load(resource) spriteName = Sprite.from(texture) spriteName.y = 400 app.stage.addChild(spriteName) } setup("path/to/sprite.jpg", "char4Sprite")
I'm also still researching and learning about this library, and I think it's worth every second I spend on it. I highly suggest you to bookmark the examples page! The examples are not hard to analyze and understand, and they can help you to better visualize the role of a lot of functions. pixijs.io/examples/#/demos-basic/container.js Good luck!
@@WaelYasmina Thank you very much for the heads up, that´s exactly how I learn the fastest with programming, copying examples and then trying to modify them. One thing that I miss, since I started last year studying with Java, is that when hovering above a method etc, an explanation is given, or better yet, you have the scroll down pop up with options. Can this be achieved with libraries such as this? I´m using VScode.
There are extensions you can add to VSCode which provide that feature. But it's rare to find one for libraries/frameworks (except popular ones like React or Angular).
Thanks for the quick reply, Wael. I've checked and the file path I've used is correct (I store app.js in the root directory and have a file called wine.png in the images directory, in root). For the file path used for importing the texture, I'm using `./images/wine.png`. The error message is as following: =========================== Uncaught (in promise) error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 99, … } bubbles: false cancelBubble: false cancelable: false composed: false currentTarget: null defaultPrevented: false eventPhase: 0 explicitOriginalTarget: isTrusted: true originalTarget: returnValue: true srcElement: target: timeStamp: 99 type: "error" : function isTrusted() : EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … } =========================== I'm not sure if this error has anything to do with crossorigin because it's not supposed to throw an error for CORs since I'm using a local file, but perhaps I'm wrong about this. Once again, thanks for your help!
Try using another browser. In the meantime, I'll create a small project and I'll send it to you so you can test and see if the problem comes from your code or from something else.
At around 40:20, why didnt the newly added background got added on top of the previously added sprite, i.e. dragon? I mean the layer / stacking which you explaind earlier in the video is not applying here? :)
Smart question. My guess is that since the tiling sprites are mainly used for backgrounds, the creators of the library made it in a way that the tiling sprites have lower order compared to the other types of sprites thus they're placed behind. I'm not 100% sure though.
if anyone is stumpled upon the Pixi loader then try using the below code // Load the enqueued assets PIXI.Assets.load('../../assets/images/zombiefiles/png/male/Attack (5).png').then((texture) => { // Once assets are loaded, create a sprite from the texture const char4Sprite = new PIXI.Sprite(texture); // Position your sprite as needed char4Sprite.y = 450; // Set the y position as needed // Add the sprite to the stage application.stage.addChild(char4Sprite); }).catch((error) => { console.error('Error loading assets:', error); }); Basically in the modern version pixi is providing Assets class for loading assets.
I am writing a physics simulator and am using native canvas right now. My fear is performance when I start to scale things up. It seems to be getting laggy with only 300 particles already. So my thought was to replace the canvas rendering with WebGL. Trouble is it looks tremendously complex to code. I don't want to worry about buffers and memory allocation, but I do require high performance. Does it make sense to then to replace canvas with PIXIJS instead? Would it increase the performance? If it would increase the performance then why doesn't canvas do whatever PIXIJS + WebGL does under the hood, as they both use the GPU? Is it that PIXI slightly more complex to code compared to native canvas so they kept it that way? If the difficulty is the same I don't see why canvas is not deprecated then. Compatibility?
I'm not an expert in the matter so I can't give you precise answers to these questions, unfortunately. However, here's something that might be a little insightful regarding your last question (read the last 2 paragraphs of the chosen answer): stackoverflow.com/questions/36908427/webgl-vs-canvas-2d-hardware-acceleration Now from what I understand from those paragraphs, the main difference between WebGL and 2D Canvas is that the latter lets the browser handle all the optimizations. while the former gives you the total control to do the optimizations by yourself. And based on that, *I think* Pixi.js takes the control WebGL provides and does the optimization work for you behind the scenes. Anyways, I'd suggest you give Pixi.js a try which is super easy. Just learn the basic stuff that will make you able to do the same things that you are capable of using native canvas. And then based on the results you decide if you're satisfied or you need more advanced tools like shaders, buffers, etc... Finally, you can get better answers from real experts if you ask your questions here: github.com/pixijs/pixijs/discussions/ www.html5gamedevs.com/forum/15-pixijs/
@@WaelYasmina thanks. If its easy to work with I guess I will just go ahead and try. Then I will do some stress testing, then checkout to the canvas implementation again and compare the results. If the bottleneck truly is the graphics drawing and not the physics calculations then I might see some improvement.
Hi, when i try app.renderer it doesn't seem to work. The background colour doesn't change and the resize only stretches the height far down the screen. Do you know what might be wrong?
Okay I found a solution. Turns out it wasn't the renderer but for the background color. The issue was i spelt "colour" the UK way which simply doesn't work. I'm not sure as to why the resize wasn't working but I found that placing "resizeTo: window" inside the configuration object works the same
The resize method is there just in case you wanna resize the canvas later in your code. So yes, you can skip it and just set the size in the configuration object.
35:20 when try function setup() { const texture = PIXI.Texture.from('blob_1.png') console.log(texture) const sprt = new Sprite(texture) sprt.position.set(50,50) console.log(sprt) app.stage.addChild(sprt) } get uncaught promise error , should i ihave also blo_1.png separate file ?
i am getting an error below Uncaught TypeError: Cannot read properties of undefined (reading 'shared') at app.js:76:33 127.0.0.1/:1 Refused to execute script from '127.0.0.1:5500/node_modules/@pixi/graphics-extras/lib/' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. (index):50 Live reload enabled. :5500/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
When I try to use PIXI.Loader.shared I just get this error message: "Uncaught TypeError: Cannot read properties of undefined (reading 'shared')" Do you have to install something separately?
