Decisions to take before starting a game

[prtksxna]

Hey,

 

I am starting development on a new game. I have some experience in HTML5 games and have a made a few in the past - Cascade and Vertigo. I wish to make this one more polished and (hopefully) for more platforms. I didn't use any library in Vertigo and as it was pretty simple I didn't face too many problems. I have a lot of questions in my head and there are so many resources out there that I can't make any decisions. I'd be grateful if you could help   - 

 

1. Animations: Animated GIFs don't work on Canvas   Should I do my own animation using spritesheets. Are their any tools that are used to create spritesheets from animated GIFs in photoshop? Is there a better way to do this?

 

2. Physics: The physics for this game is pretty simple. I had used the Euler's Method for integration last time. Does it make sense to use the Runge Kutta integrator for more accuracy? Does this even matter in small 2D games? Should I look at box2d?

 

3. Sound/Music: Should I just use WebAudio or should I use a library to take care of the sounds effects and the background music?

 

4. Responsive: How do you guys make your games responsive across different sizes and ratios? I am making pixel-art assets so I can't simply scale the canvas element as it does not do nearest neighbor interpolation on most browsers. Does the physics become responsive too ie if the platforms are 200px apart on mobile and 400px apart on tablet then the jump velocity needs to be 20px and 40px respectively?

 

5. Performance: Does it make sense to use Pixi.js? Most of my animations will be frame by frame. Not too many moving objects on the screen, almost turn based.

 

6. Packaging: I am planning to make it a Chrome app and Firefox OS app. I am also thinking of packaging it using Cordova to publish on mobile platforms (iOS/Android). Any thing to remember if I am doing this sort of a thing?

 

7. DevLog: I have seen studios maintain developer diaries. I am not sure what the norm is here, some people do it on forums like this one or have a dedicated website. How soon should I start doing this? What details should I post here?

 

8. Launch: I'll put it on Clay.io and MarketJS. Is there something else that you guys do on launch?

 

I am making this game alone. Does it make sense to do it under the name of a studio or just on my personal website. Sorry if these questions are too n00b, but I have too many doubts and no one around me that I can talk to. 

 

 

—prtksxna

[ghostrifle]

Hi,

 

regarding point 5.

 

The question should be, why shouldn't you use it? It's simple to code. It's fast. I don't see any drawbacks in using pixie.js.

 

regarding point 1:

 

did you try texture packer? http://www.codeandweb.com/texturepacker

[prtksxna]

regarding point 5.

 

The question should be, why shouldn't you use it? It's simple to code. It's fast. I don't see any drawbacks in using pixie.js.

 

regarding point 1:

 

did you try texture packer? http://www.codeandweb.com/texturepacker

 

I've been looking at Phaser and might end up using it. It already uses Pixi for rendering so that should be covered. Thanks for that link, I'll check it out. Will it be able to explode animated GIFs and create atlas files for Phaser?

[ghostrifle]

I've been looking at Phaser and might end up using it. It already uses Pixi for rendering so that should be covered. Thanks for that link, I'll check it out. Will it be able to explode animated GIFs and create atlas files for Phaser?

Never tried to explode GIFs. But it creates sprite atlas for phaser and for pixie.js without any hassles.

[mentuat]

1. Animations:  Personally the best method I've found is to use flash to create animations then generate spritesheets with shoebox

 

2. Physics:  It's probably obvious to say but whatever you use, test early and often on your target mobile devices to keep on top of performance issues!

 

3. Sound/Music: I've been using howler.js to varying degrees of success.  There will always be a device/browser combo out there somewhere that will mess with your sound!  HTML5 games these days really should have sfx so it's worth investing some time getting it right.

 

4. Responsive: Not sure what to suggest beyond scaling a fixed size canvas using CSS

 

sorry can't help much with the rest of the questions!

[prtksxna]

1. Animations:  Personally the best method I've found is to use flash to create animations then generate spritesheets with shoebox

 

 

 

 

Right, I think I'll make animated GIFs on Photoshop and then use an atlas file to handle the animation in Phaser.

 

 

4. Responsive: Not sure what to suggest beyond scaling a fixed size canvas using CSS

 

 

 

Scaling the Canvas isn't a viable options for me  because of bicubic interpolation being done by Chrome. This will make the pixel art that I am using very bad as soon as it is scales

[Sebi]

Right, I think I'll make animated GIFs on Photoshop and then use an atlas file to handle the animation in Phaser.

 

 

 

Scaling the Canvas isn't a viable options for me  because of bicubic interpolation being done by Chrome. This will make the pixel art that I am using very bad as soon as it is scales

 

I would detect the device/pixelratio/screensize of the user and then wether it is retina / mobile, tablet or desktop, pick different canvas base dimensions and assets.

You can't avoid scaling the canvas to fit all devices and at the same time keeping the performance up.

 

Afaik, the bigger the canvas the longer it takes to render it.

 

Just make sure you pick the most common canvas size for each device e.g. mobile 320x480 so you only have to scale on devices that are slightly off.

 

You could also just create a canvas with exact screen dimensions but then you would have to create way too many assets to fit any screen size and in the end you will have to scale the sprites anyway,

[prtksxna]

You could also just create a canvas with exact screen dimensions but then you would have to create way too many assets to fit any screen size and in the end you will have to scale the sprites anyway,

 

 

Or I could just scale the asset when I use drawImage, that way I'll get nearest neighbor interpolation as well. I am still very unclear about how games handle changing screen sized and ratios. Any detailed articles on this would be very helpful.

[prtksxna]

Never tried to explode GIFs. But it creates sprite atlas for phaser and for pixie.js without any hassles.

 

It didn't explode the GIF. I'll let you know once I figure it out. Thanks for your help! 

[d13]

> Animations

=> Shoebox: http://renderhjs.net/shoebox/

 

> Physics:

=> Use Euler for most games, anything else (even Verlet) is overkill. RK is just for PhD. students. In the rare case that you might need full-blown physics simulations use Physics.js or p2.js. Box2D works, but it's a monster and way to much code overhead for a happy programming experience.

 

> Sound/Music:

=> The WebAudio API is a low-level toolbox that let's you make your own custom API. It doesn't have any "play", "load" or "pause" methods - you need to make those yourself using the WebAudio API's tools. It takes about an afternoon to build a sound/muisc player for games from scratch. You can learn the basics here: 

http://chimera.labs.oreilly.com/books/1234000001552/index.html

It's fun to do and a good learning experience, but if you're really busy just use Howler.js:

https://github.com/goldfire/howler.js

 

> Responsive:

=> Can't you just design for the biggest possible resolution and scale down? I'm not sure about the interpolation problems you're experiencing, maybe you can explain this a bit more?

 

> Performance

=> Pixi. It's extremely low-overhead, even for displaying static images. It takes care of all the sprite management and rendering for you too (The "scene graph" as they like to call it).

 

=> Packaging

Cocoon.js: https://www.ludei.com/cocoonjs/

 

> DevLog: 

=> No idea

 

> Launch: 

=> iOS

 

> I am making this game alone. Does it make sense to do it under the name of a studio or just on my personal website. 

=> No, the game just has to be good.

[prtksxna]

Thanks a lot @d13! I've been tinkering with Phaser all day and I think I'll let it take care of Animation, Audio and Performance. I can't make it for the largest resolutions and then let it scale when using the "pixel art" style. That is because the scaling algorithm is usually bicubic and not nearest neighbor and thus there is anti aliasing which makes the pixel art look blurry.

 

I wasn't sure how to package if for iOS, I'll look into Cocoon.js, thanks!

[prtksxna]

I would detect the device/pixelratio/screensize of the user and then wether it is retina / mobile, tablet or desktop, pick different canvas base dimensions and assets.

You can't avoid scaling the canvas to fit all devices and at the same time keeping the performance up.

 

Afaik, the bigger the canvas the longer it takes to render it.

 

Just make sure you pick the most common canvas size for each device e.g. mobile 320x480 so you only have to scale on devices that are slightly off.

 

You could also just create a canvas with exact screen dimensions but then you would have to create way too many assets to fit any screen size and in the end you will have to scale the sprites anyway,

 

Apparently Phaser has an option for turning off anti-aliasing. I was also reading a blog post that explains how the ImpactJS framework takes care of this - http://phoboslab.org/log/2012/09/drawing-pixels-is-hard - quite an interesting read