Zyie Posted April 12, 2018 Share Posted April 12, 2018 Hi, so I'm very new to Pixi.js and javascript, coming from a c++ background I am lost without my classes. Can anyone explain to me what a basic template should look like for starting a Pixi.js game and you guys go about organising the code into separate files? I currently have one big blob of code in a single file, as all the tutorials i found only use one. Any help you can give will be much appreciated. edit: so i finished the game i'll leave a link and any feedback on the code would be helpful also does anyone know how to scale the size of the renderer for different screen sizes? GAME LINK: https://github.com/SeanBurns221/Pixi.js-Game Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 12, 2018 Share Posted April 12, 2018 C++? Typescript + simple concatenation of files through "tsc" compiler. Quote Link to comment Share on other sites More sharing options...
Zyie Posted April 12, 2018 Author Share Posted April 12, 2018 @ivan.popelyshev Not going to lie i have no idea what most of that sentence meant xD I am very new to coding (only experience with c++ for a few months) and was just wondering how people set out the game structure since everything i have is in one file Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 12, 2018 Share Posted April 12, 2018 People made some boilerplates for pixi, but they are big: https://github.com/pixijs/pixi.js/wiki/Boilerplate There are many ways to setup a modular project and they are about HTML5 as a whole, not about pixi. If you want to do the project right now, just take one of boilerplates. If you want to get fundamental knowledge, go for javascript books and learn ES5/ES6. There are classes and modules in ES6, and many simple libs for ES5. I use simple setup - simple concatenation through typescript compiler. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 12, 2018 Share Posted April 12, 2018 I'm actually in a stupor, I do not know what to advise for your level. You have to make a leap of faith somewhere. Quote Link to comment Share on other sites More sharing options...
Zyie Posted April 13, 2018 Author Share Posted April 13, 2018 Thanks for your help. Do you know how to create a class for PIXI.Text? Setting the position, anchor ect for every text looks really messy Quote Link to comment Share on other sites More sharing options...
jonforum Posted April 13, 2018 Share Posted April 13, 2018 Unfortunately you cannot master PIXI without having a base in JavaScript! What you call class in C, is call prototyping in JS. My advice is to start with somes tutorials with video2brain. https://www.lynda.com/JavaScript-training-tutorials/244-0.html It is thanks to their video that I was able to start with JavaScript and PixiJs a year ago. Assuming you already have a base in HTML5 and CSS ? Otherwise you have to start with these 2 primary languages. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
b10b Posted April 13, 2018 Share Posted April 13, 2018 @Zyie if you want to create a family of similar PIXI.Text then you could create a new class of your own and have it compose and retain an instance of PIXI.Text within it (e.g. with common attributes, perhaps passed through from constructor parameters). Or create a factory method that churns out a configured PIXI.Text. Probably worth spending some time learning various "creational" and "structural" design patterns as well as a foundation of Typescript. But anything written to answer such questions will likely make it sound harder than it is ... just study the PIXI examples, then write code, refactor, repeat! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
botmaster Posted April 13, 2018 Share Posted April 13, 2018 Coding is already a challenge in itself for beginners but adding on top of that dealing with a framework that handle webgl and its specific challenges is gonna be ultra ultra tough for a beginner. You might be trying to chew way more than you can handle. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Evar1ste Posted April 17, 2018 Share Posted April 17, 2018 @Zyie I started my adventure with PIXI from analyzing code on PIXI examples site. Then i found that boilerplate and start using it. But first of all u have to understand and be capable of writing code using ES6, cause the linked repo that i provided is using Babel compiler to rewrite your code into ES5 (i mean u still can stick to ES5 but ES6 is more similar to languages that you've been using). I think that there was a post about best practicies somewhere on forum (about best design patterns for creating new games and code structure). Gonna look for that post (not sure if it was here or on any other site). ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Zyie Posted April 22, 2018 Author Share Posted April 22, 2018 Hi everyone thanks for all your posts. I've finished making the game and was wondering if anyone would like to look at the code and tell me what i can improve on. everything was a stab in the dark so don't expect it to be good xD Also can anyone tell me how to scale the scale to fit different screen sizes? i would love to be able to share this with some of my friends on their phones GAME LINK: https://github.com/SeanBurns221/Pixi.js-Game Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted April 23, 2018 Share Posted April 23, 2018 Do you know that you can publish it on github pages? Just make a "gh-pages" branch, and it'll show under "seanburns221.github.io/Pixi.js-Game/" Quote Link to comment Share on other sites More sharing options...
Owlzy Posted April 23, 2018 Share Posted April 23, 2018 18 hours ago, Zyie said: Hi everyone thanks for all your posts. I've finished making the game and was wondering if anyone would like to look at the code and tell me what i can improve on. everything was a stab in the dark so don't expect it to be good xD Also can anyone tell me how to scale the scale to fit different screen sizes? i would love to be able to share this with some of my friends on their phones GAME LINK: https://github.com/SeanBurns221/Pixi.js-Game I'd say your code style is pretty decent, especially if your new to programming like you said, I've seen worse. Bit of slightly odd stuff with coding conventions going on is the only thing I could see. In JS generally functions start with lower case first word, with a capital letter for the first letter of any subsequent word. There was at least one function that wasn't in this style. Also I would normally use camel case for my js file names, is fairly minor though. Also in JS I always format my curly brackets like this for functions etc myFunction() { //some code } Although I have seen people format theirs as you do, in a more c style. Personally if I'm writing Java or JS I will do it in the above style, if c++ or c# I will use the format you do here. Again, not massively important, but its good to try and stick to conventions. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
mattstyles Posted April 23, 2018 Share Posted April 23, 2018 There are linters to help with code style if you're really worried about conformity. There are also off-the-shelf linting rules (like Standard, or XO, etc etc etc). I wouldn't worry about it too much if I were you, consistency in your own code base is more important, linting does (of course) help enforce that, but I wouldn't worry too much. You might want to solve the 'all code in one file' problem though. None of the solutions are super easy though unfortunately. Just try googling, nothing is Pixi-specific, so just general JS googling will throw up plenty of hits, then start a discussion here about it. Quote Link to comment Share on other sites More sharing options...
coder2012 Posted April 24, 2018 Share Posted April 24, 2018 I have started on a game using PIXI and I'm using ES2015 so I can have classes. This could be the kind of abstraction you are used to. Feel free to have a look at my repo as it may help you! https://github.com/Coder2012/containers Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.