These are chat archives for pixijs/pixi.js

12th
Jul 2017
Dwayne Neckles
@dnecklesportfolio
Jul 12 2017 12:23
hi im a pixi newbie. just curious how come they arent any examples of structuring a website with Pixi.. I understand its used for games yet i often see fwa awarded websites made with them... on the web there isnt much direction on building sites .... is there some knowledge that is assumed, that i need to know?
ᦖєgιт
@LegitSoulja
Jul 12 2017 12:25
You're looking for Adobe flash. You're in the wrong place
Websites isn't fully built with pixi, only certain parts. Look at pixi site page for an example.
But a full canvas site, that's a site, that does more than just drawing. Best to go with flash lol
Dwayne Neckles
@dnecklesportfolio
Jul 12 2017 12:32
Thanks for the response LegitSoulja, tho you are right, the pixi site page is rare example... I see a lot more examples that match these immersive experiences http://www.ibuongiorno.com/en/ Thats a full site
there are more "immersive" sites in the gallery section that use pixi has the main UI... unlike the pixi homepage. http://lookbook.wedze.com/winter-2016-2017/en/free is another example.
ᦖєgιт
@LegitSoulja
Jul 12 2017 12:35
I never checked, but idk you sure you wanted to accomplish that? It'll be a lot of work.
Dwayne Neckles
@dnecklesportfolio
Jul 12 2017 12:36
I only want to do whatever it is the guys who make FWA awarded websites do, they are not using flash, they are using pixi. maybe someone else has an idea.
ᦖєgιт
@LegitSoulja
Jul 12 2017 12:40
That first link you showed me, wasn't full site canvas
He's using mostly svg
Not hard to dig into the sites source.
Even though I'm on mobile atm.
zurcacielos
@zurcacielos
Jul 12 2017 14:49
@dnecklesportfolio below the page of pixi examples there's an invitation to create your own examples. You can create a github public repo with a very clear scope definition of the things you want to achieve, upload the graphic art, facilitate the work of contributors as much as possible, and share the repo asking for contribution. Even other people new to PIXI may contribute the things they are learning at the same time than you.
Dwayne Neckles
@dnecklesportfolio
Jul 12 2017 18:35
legitsoulja most js sources are obfuscated. http://special.bose.eu/fr/ website is sweet .... @zurcacielos i didn't see that invitation at all and will look again. what remains still is the question of Pixi not speaking to building websites. its not a big deal, i guess im being visual/literal so that stood out. But yeah adobe flash i know its not.
@zurcacielos hey i see where the invite is, illl def take your suggestion to contribute. thanks.
zurcacielos
@zurcacielos
Jul 12 2017 19:06
@dnecklesportfolio great. Anyway, you may find techniques on how to create animated websites with other technologies that can be translated to pixi. For example you use gsap tween library to animate any javascript variable and consecuently you can animate pixi objects. At the same time you can divide the website as videogames are divided into "scenes". You can easily create a GameApplication class extending PIXI.Application, containing an array of GameScene objects, meaning you will create several scenes extending that class like LoadingScene, IntroScene, HomeScene, and so on. Scenes will have a method setScene() to add child objects to the scene's sceneContainer field, a method play() called by the application.playScene that will create a loop on that scene or return the loop function so Application handles it . A method update() to change object positions. If you have a good knowledge on OOP and game loops/states you can do it yourself, moving responsabilities as you need. If not you may also consider phaser or check how phaser works so you can create a minimalistic framework directly on PIXI without intermediate libs. Other than that you just need to handle user input events on the event handlers you define on setStage, and animate objects. It's good to have an state machine per scene, there are state machine libs on npm you can use, so you can define clear states of your scene or "page on your website". Like "menu", "angel-moving", etc. You can decide if overlay CSS objects or not over the application.stage. Will have to deal with stage scaling to browser, positioning of objects, etc. Welcome to the real world neo :|
@quickfingers the book has "some" good things. I bought it. You'll probably benefit too from books of phaser or web resources of phaser.
Dwayne Neckles
@dnecklesportfolio
Jul 12 2017 19:22
@zurcacielos That is helpful, thanks.
zurcacielos
@zurcacielos
Jul 12 2017 20:04
any marketplace with PIXI Jobs? like upwork.com but more specific?
Dwayne Neckles
@dnecklesportfolio
Jul 12 2017 20:17
i tried to doing a search on pixi on indeed. there wasnt much out there...but it could be a location thing tho im in a big city