Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Team Think Labs | Understanding HTML5 Game Layout, and Easy PSD Slicing
single,single-post,postid-5062,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Understanding HTML5 Game Layout, and Easy PSD Slicing

Today we’re going to talk about how we handle responsive game layouts, as well as how to work together to slice up images quick!

One of the great things about HTML5 games is that it will run on many many devices. The downside, though is that you have to think about how your incredible design will look scaled in different screen sizes.

One easy way to get about 95% there, is to design using a safe area and a bleed. No, I don’t mean you’ll have trails of blood designing for mobile. I’m talking about good ‘ol fashioned print design. Our standard game design template we take our design, and then scale the important part to fill the window. Then the extra bits we don’t need on either side are cut off. Confused? Probably. Let’s take a look at a diagram:

live area


Though, this doesn’t work for all of our gameplay elements. Notice how there are some things floating in some of the layouts.

safe zone example

Notice that some of the items end up floating around. What programmers need to do now is to pin and center a few items to the screen. It’s important that you talk to the programmer on your project to give them an idea about what you want to do and talk through it.

Now, this technique doesn’t work well for all scenarios but it works well for most. If you want something to work differently, again, just chat up your local friendly code monkey.

Part 2 : Slicing with Photoshop’s Generator

One of the things that helps to speed up our workflow is when a designer can slice up their PSD for a developer. It’s great because the designer is much more used to how they name things. Sometimes what you get sliced isn’t exactly what you need, but you typically still end up ahead. So, here’s one way that we can have our PSD’s sliced up and we can work together.

Here’s an example of a PSD:



If we were to group together items that we wanted exported as an image, we would be able to take advantage of a nifty new feature in Photoshop called generator.



Then, just turn on generator and here’s what you get:


Then, just turn on generator and here’s what you get


As an added bonus, every time you hit save those assets get exported automatically!

Now, instead of needing to export all your images individually just organize your PSD and put it on the server. If there are parts a developer needs slightly different, they can just modify the PSD and put it back on the server. That way when design changes are made, we get all the sliced updated assets for free.

Go teamwork!