Organising Code

[Zyie]

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

[ivan.popelyshev]

C++? Typescript + simple concatenation of files through "tsc" compiler.

[Zyie]

@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 

[ivan.popelyshev]

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.

[ivan.popelyshev]

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.

[Zyie]

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

[jonforum]

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.

[b10b]

@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!

[botmaster]

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. 

[Evar1ste]

@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).

[Zyie]

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

[ivan.popelyshev]

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/"

[Owlzy]

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. 

[mattstyles]

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.

 

[coder2012]

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