PixiJS Part 3: Renderer, Ticker, & Stage

[@mattkarl5117]

Looks awesome! Thank for digging into v5. Bonus is that we added `resizeTo` as an Application option which would allow resizing to a DOM element or the window. Would clean up the resizing handler. Just a little extra convenience.

[@youAmera]

Cool feature, like it!

[@ashwinexe]

A great tutorial, I'd be even better if the code editor was enlarged since there was a lot of space leftover to zoom in (for better readability)

[@ReginaldMcPherson]

Am I missing something, it seems like you went one way then decided to reverse course so you can do it an older way? wish I had known this was going to be the case before I watched the first video. Feels like I wasted my time.

[@IvanPopelyshev]

Everything is correct =)

[@abhijeetiyer7569]

I m getting an error that says " Uncaught TypeError: PIXI.Renderer is not a constructor"

[@CJGammon]

I would call console.log(PIXI); to see what's there under Renderer. Also check that you're using the right version from here: github.com/pixijs/pixi.js/releases (not the legacy one unless you need 2d canvas) and that it's being loaded correctly.

[@sasha_prisyazhnyy]

Updating to a newer PixiJS script URL worked for me (5.2.0 Production Build in my case).

[@kirillyerenkov3234]

Man, I love your videos. Three.js series were great. But can you make your tuts faster?😂 It's hard to wait for them:) Can you maybe advice some books, yt channels or other cool resources about Pixi? Thank you a lot.

[@CJGammon]

Thanks for the kind words. Sorry they're taking so long to make, trying to get them done between other things. The pixi.js website has some good resources on the library here: www.pixijs.com/tutorials

[@8o8inSquares]

4:40 there is a new option available "resizeTo" that gets an element. whenever element's size is changed, it will automatically resize the canvas.

[@thesuperyou2829]

if you can please make the font even more small its too big...

[@khmerfarmer833]

Good Video PLease Make it more

[@mpbMKE]

The responsive resizing works, but now my sprite isn't loading for me... The path is correct, because when I mouse over it in the code it shows me a preview, it's just not loading into the stage like it did after the last video.

[@張子晏-g6l]

you can add the throttle func, when window resize event emit. It will be more smooth.

[@JassarDev]

Ok, I'm losing it. I did everything exactly the same but it's not working. PLEASE HELP!

[@JassarDev]

nevermind, I was missing stage.addChild(img) ... also misspelled height!!

[@jaysanprogramming6818]

Can you give a link where you found the information about that WebGL exclusive rendering is explained in the documentation or in release notes? Thank you again for your work. It is very helpful for us starters.

[@CJGammon]

They haven't done a great job explaining it. I had to reach out directly to understand the way they're separating legacy functionality. You can find some of the discussions referenced in this issue: github.com/pixijs/pixi.js/pull/5468

[@urielmendozag.7767]

What is the difference between PIXI.Renderer and PIXI.Application?

[@CJGammon]

PIXI.Application is a helper class that builds a lot of the basic stuff for you, like a renderer, root display object, etc., The Renderer is the render class that is used to draw your content onto the screen.

[@urielmendozag.7767]

@@CJGammon Thanks

[@MD-cu8tt]

Thank you brother !

[@rajeshmunagala2686]

Hi... Thank you making video tutorials on pixijs .. Can you please tell me how to add input box, datatable to application or context.. Please share some useful resource so that I can make... Thank you