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!
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); }
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 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)
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.
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)
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!
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.
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?
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
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.
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.
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.
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 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.
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.
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.
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.
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).
Pixi.js v8
Videos
ruclips.net/p/PLjcjAqAnHd1ELH6j5RZaT2Ilvwj1sMCi6
Article
waelyasmina.net/articles/pixi-js-tutorial-for-complete-beginners/
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!
Congratulations! I'm so glad to hear that!!
I wish I had seen the video when I had my test
Nikola, kako se zove firma u kojoj si dobio posao? Sutra krećem da radim u novoj firmi sa Pixi-jem :)
Hi there! So glad for you❤
Any open positions?🫣
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);
}
Thanks, very interesting. Such a good explanation, even a beginner can understand.
Awesome! Great video! Huge thanks
Thanks a lot! Greetings from Brazil :)
You're welcome!
I ❤️ Brazil
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.
Awesome video, great pace, thanks! )
You're welcome!
Great video, much thanks
Thank you.!!!!
Why not use web server ?
❤
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)
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.
Same...
Same problem here : const loader = PIXI.Loader.shared gave me a very frustrating error...
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.
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 hate you because you just made me want to play Phantasy Star 4 again while I'm working.
(Just kidding, loved the tutorial and the references! :) )
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!
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.
Thank you very much!
Don't worry, just a bit of practice and you'll be fine. Everything has a learning curve.
This is the best pixijs tutorial that I’ve had. Thank you so much. Please do a Udemy pixijs lesson or any other pixijs video compilation and I’ll buy.
You just made my day with such kind comment, thank you very much! I really appreciate it!
This was amazingly well made and clear. Thank you!
Now i can believe on humanity, some with real knowlegde give it to us with the most simple way.Very good explanation!
This comment made my day! I really appreciate your kind words, thank you very much!
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?
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
Awesome content! How do you use this library for production? do you have a tutorial on that? Thanks!
hi, im getting errors setting it up. Where can I show my problems or who can I seek for help?
I followed the steps but at 1:59, I did not see the text on the console on my screen, what could be the problem.
i'm so thankfull that i found your chanel!!! EXCELENT CONTENT ☺☺♥
how to use new pixi.js version with vue 3 sir, any ideas for this?
please create a video to demonstrate how to use spine in pixi
Thank you - it’s the best game dev introduction that I ever seen
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.
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.
This video is great. The documentation is a bit overwhelming when you are completely new to PixiJS.
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.
Excelente tutorial, muchas gracias, tienes una gran "pedagogía"
Thank you! I really appreciate your positive feedback.
It doesnt recognise npm what is that?
Thank you for the effort to build this tutorial, now I feel prepared to explore the official pixiJS documentation!
Nice!
Thank you for your kind words.
Awesome demo, thank you!
Awesome tutorial man! Can you help me with one task they gave me for the job interview ? Will be much appreciated!
nice tutorial thanks man
Great and clear tutorial. Thank you!
Thank you.
Looking forward for extended tutorial (or better project example) on PixiJS
Amazing video! Quite a lot of knowledge, but you have made it very easy to follow along.
Thank you from Korea
so wonderful tutorial
I love Korea! Thanks 😊
Where to find textures pack?
github.com/WaelYasmina/pixitutorial/tree/main/images
thank you brother for this tutorial, really good job
Great job!!!
Thanks for the tutorial mate, it is super helpful
Thank you for this tutorial! You've gained a new subscriber.
That's so kind of you! Thank you
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 don't get what you mean by having blo_1.png as a separate file.
Can you copy and paste me the entire error message.
@@WaelYasmina There's unfortunately no error message. It just shows up as uncaught promise error :(
Are you running your project on a local server?
@@WaelYasmina yes , but I already switched to phaser )
@@WaelYasmina Yes, all the files are local
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.
Total summary in 1 line :
"PiXi js " is a library like 'Photoshop '
LOL 😂
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.
@@WaelYasmina makes sense. Thanks again.
Love ur work
its very amazing that you are teaching this perfectly this component of js , very appreiciating !!!
Thank you very much!
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.
Well, I ended up uploading the entire project.
github.com/WaelYasmina/pixitutorial
@@WaelYasmina Woah, thanks! Unfortunately the same issue still occurs :( I've added an issue to the repository so you could view it in more detail
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.
Yes. Great job! Thanks!
this really helped a lot! please do more!
Your teaching style is so great, it reminds me of my old vocational high school days! Thank you so much ❤
Thank you, glad you think so!
is it possible to create a multiplayer? what would you use?
Of course it is.
I'd use Node.js, Express and Socket.io
I think it would be my new favorite channel
That's nice to hear! thank you!
Very good tutorial, thank you for all your work on it.
I appreciate your kind words. Thank you!
The docs gave me a nightmare this tutorial is great
Thank you!
Thank you!
Hats off man!!!!!!!!!!!!!!!!!!!!!
Thank you!
did you have a video for pixi spine?
No, but it's in my to-do list.
Thx.! you're the best one :D
Haha thank you!
Great tut quality.
Thank you!
Excellent tutorial! Thanks a lot!
You are welcome!
Great crash course! Thanks
No problem!
Amazing tutorial!!
Thank you!
So far so good, this is my third tutorial lol
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).
@@WaelYasmina Well, I got a clickable rectangle moving already! These examples sure help a lot, along with the searchable documentation.
gracias
No problem!
Most underrated channel ever. Best tutorial available for the language. Thanks!
I appreciate your kind words, thank you!
I'm already halfway this video and I can tell that is a HIGH quality tutorial that I wouldn't mind to pay for!. Thank you :)
That's so kind of you, thank you very much!
01:24 worked for me without console errors