Top 10 Tipps for HTML5 Games

We at Softgames love HTML5 games and have learned a lot while licensing over 250 HTML5 games in the past 2 years. Today we would like to share some of our past experiences to make developing games easier for you! If you have a great game please feel free to contact us for exclusive or non-exclusive sponsorships at partners(at)softgames.de .

Top 10 Tipps for HTML5 Games

• Game texts: Do not put game-texts on images, within your game-code or your css/html code. The one and only right place for texts is a seperate file, that stores your texts. Furthermore always provide a separate file with all texts your game uses. This file usually just contains an json-object like this: var mytexts = {'en':['this is englsh',...], 'es':['esto es español',...]}. This will make localization much easier for all sides!
• Loading time: Be efficient with the game assets and include a loading bar while testing your game on EDGE, 3G and not only WIFI.
• Size: Your game should not be larger than 3 MB including all assets, code and sound files. The less size the better! If you use sound make sure it can be switches on/off via an ingame button.
• QA: Be aware that different operating systems have their very own strengths and weaknesses, while tablet and HD devices are getting very popular. Try to test it on as many real devices as possible!
• Full screen is King: Make your game auto-resize by any resolution. This also includes hiding the URL bar to create a more native like experience.
• Tutorials: Create more player interactivity and less text. Players hate to read and want to play. This also applies to the tutorial!
• Gameplay: If advancing in HTML5 games programming try to create something unique and not another Construct2 physic game. The key to success is a good balance of appealing casual graphics, smooth gameplay with long play sessions and giving the player a reason to complete the game within multiple game sessions.
• Landscape or Portrait view: When designing your games decide already at start if you want your game to use portrait or landscape format. Show the player a simple icon to change orientation, if needed. Don´t let the game scale to e.g. landscape mode when it´s optimized for portrait!
• Payments: If you are based in the EU make sure that you get a VAT-id to avoid additional taxes on your payments. If based outside of EU get a certificate of incorporation or a certificate of residence.
• Invoices: Create fast and easy invoices through various online invoice creators such as http:// invoice-generator.com/#/

or any other!

We will be posting more insights soon and hope you enjoy them! Contact us for exclusive or non-exclusive sponsorships at partners(at)softgames.de.

P.S. Check out our Construct 2 plugin to make connecting to our API like a piece of cake!

https:// github.com/softgames/jsapi-documentation/wiki/Construct2-games

Interesting points - consider maybe posting a tutorial with this information to the tutorials section?

Size: Your game should not be larger than 3 MB including all assets...

Depends on the game I guess. Then again I've seen games with translations bigger than 3mb.

Something I picked up from years in web design. If you're using transparent PNGs saved out from Illustrator or Photoshop, they are probably larger than needs be. Use tinypng to resize. I've saved up to 60% using that tool in the past.

These are great tips. If you do a serious game (like a game to publish to a store or to a publisher) I think those are the minimal requirement, also I'd like to remember to make it easy for the player, like really, the player should not even be confused about what an option does in the menu, also skippable cinematics are good.

niceeeee

Kursal The export for C2 does this for you. You can set it to brute force them smaller as well in the export options in the sprite editor.

3MB is going to limit you to games that are not very complex or long.

How does VAT & Invoicing make better HTML5 games?!!!!

using tinypng will help you to get rid from unnecessary size's.

You can check that by export any image from the image dialog in your c2 project, then import it to tinypng site.

The export image from the site will be smaller by at least 50%.

Some good suggestions here, but I'm not quite sure that asking 3mb of an HTML5 game is practical in most cases. Maybe true of some flash games...

I think the OP is talking about creating games and selling licenses to a/some publisher(s) mostly, so we are not talking about ultra original big games, but rather fun games that are still good

slanw Have a read of Construct 2s export time optimisations

Two points to take away:

1. If you compress images before importing them to C2 you are wasting your time because C2 converts them to an uncompressed format on import.

2. C2 performs its own image compression on project export (note: not on image export)

So save your time and let C2 take care of it.

BlueSkies

Than's for the advice, you saved my time from change all the 100+ images in my project.