Zyie

Organising Code

Recommended Posts

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

Share this post


Link to post
Share on other sites

@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 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.