A Long Way Home - WIP Thread for conversion to FireTV/Gamepad support

jonmulcahy

Hi Everyone,

I wanted to start a thread to document what I've had to go through to convert my old game A Long Way Home. This has been one of my favorite games I've made, if not the favorite. Over the years I've ported it to iPhone /Mac / Kindle / Nook / Win8 and now finally it will find it's home on the Fire TV, which in my opinion, is the best presentation of the game by far.

This was originally made for the iPad, so the game was designed with a 4:3 screen ratio, and non retina graphics. A year or so ago i went back and converted the game to Retina graphics. This time I am pulling out all the stops.

1. Gamepad support
2. Widescreen
3. New interface
4. Tweaked menus
5. Same great gameplay.

I'm going to add a few more posts about the widescreen conversion, which I think was a pretty cool way of doing it, and another one on the gamepad implementation, but that will come later. For now, here's a few screenshots of the original game, and the a few youtube videos.

Wait until you see the final product. I'm very proud of it

Original Release

Retina (Director's Cut Release)

Braydon_SFX

Loved the game when it was released, Jon! I'm sure I'll love it on the big screen even more!

Looking forward to it!

jonmulcahy

@Braydon_SFX said:
Loved the game when it was released, Jon! I'm sure I'll love it on the big screen even more!

Looking forward to it!

thanks! it's awesome, can't wait to show it off

jonmulcahy

original trailer:

original gameplay video:

quantumsheep

Good luck!

floatingwoo

Awesome game!

phamtastic

Wow... great concept. I really dig it.

jonmulcahy

So how do you go from this:

to this:

**WITHOUT **going through 100 scenes and moving an average of 50-60 actors per scene?

Camera Magic

The camera can do some amazing stuff if you know how to play with it. There are many developers out there that do some really crazy stuff with it, but I've been able to bend it to my will to do some pretty cool things (see my custom letterbox thread for another idea).

As soon as I heard that gamepads and the fireTV were supported I knew I wanted to port this game to widescreen. Since the game was originally designed with a 1024x768 / 4:3 ratio I knew it was going to be difficult, but I was not going to give in that easily.

The first thing I did was convert the project to a 720p project. Why 720p? I've had some strange things occur when trying to convert an iPad project to widescreen without using overscan. Things get all stretched and squished. This set the camera to the proper 16:9 widescreen ratio.

Next up to fix was the individual scenes. When I switched to 720p, the scene properties switched from 1024x768 to 1200x720p, which left a massive black bar to the right, and cropped 48 pixels from the top. So (to me at least), the next logical step was to fix the cropping issue. I wanted to increase the vertical resolution to 768 to make sure nothing was cropped, so a quick calculation later and the camera size became 1366x768 (anyone who bought a 720p TV about 10 years ago should recognize that).

So, cropping issue was solved, but I still had that massive black bar, a 342 pixel black bar, sitting on the right side of the screen. I had two options. Shift EVERYING in every scene 171 pixels to the right, OR change the camera origin from 0 to -171. Thanks to the beauty of Sublime Text 2's find and replace in files, I was able to apply that origin change to all scenes in about 10 seconds .

I now had a widescreen game with everything centered with 2 black bars on the side, but this was an easy fix. A quick resize of the background from 1024x768 to 1366x768 stretched the image and filled up every pixel on the screen.

I ended up going back and resizing all my background images from their original retina resolution of 2048x1536 down to 1366x768 to make sure they looked as crisp as possible. I also tweaked the positions of the onscreen dialog boxes, they looked ok spawning where they were, but look much better back close to the edges.

All in all, it took a few hours to convert the game to be proper widescreen. I had to redo the entire menu screen, it's the same basic design, but simplified and widescreen. This is a game that among other things, deals with the vast isolation of space, and making it widescreen REALLY drives that point home.

Final Comparison:

Next Up, probably tomorrow, adding gamepad support

jamie_c

This is looking great! I'm converting an iPad game to fireTV as well, now I feel like I have no choice but to go wide screen!

jonmulcahy

@jamie_c said:
This is looking great! I'm converting an iPad game to fireTV as well, now I feel like I have no choice but to go wide screen!

thanks, and do it, it's totally worth it, the games look incredible

jonmulcahy

I mentioned before I had to retool the entire menu system when converting it to widescreen. Originally my menu screen was 2048 pixels wide and 2304 tall, it was basically like having 6 ipads next to each other, three tall, two rows:

[5][6]
[3][4]
[1][2]

section 1 was the original game title, then the camera would interpolate up to section 3, where the play button was located, along with the settings, credits and level select buttons. Tapping one of these buttons would interpolate the camera to the new section so you could make your selections. Here is a screenshot of section 1 and 3.

When converting it I greatly simplified it. It is now still composed of sections, but just 4 of them:

[3][4]
[1][2]

Section 1 is the main menu, seen below. navigating to one of the 3 other options will take you to another section. Section 2 is the controls, section 3 is the level/stage select screen and section 4 are the game credits. It's simple, clean and very easy to navigate. I think it's a great improvement over the original.

BBEnk

Looking good nice and clean.

freneticz

I want to see the code for gamepad so i know if i understand right.
My Fire TV will hopefully come next week(with 2 gamepads) want to have a game ready to test........co op FTW

Fal01

@jonmulcahy,

On your home screen where you have PLAY LEVELS CONTROL CREDITS, how did you make the options toggleable? ie highlight each option using the controller.

beefy_clyro

Nice work ... What was the file(s) you had to open in sublime? Can you explain that process a bit more please?

jonmulcahy

@beefy_clyro said:
Nice work ... What was the file(s) you had to open in sublime? Can you explain that process a bit more please?

if you view the package contents you'll see a Scenes folder, in that is an XML that contains all the information in each scene. They are numbered in the order they were created, not the order they appear in the creator. If you read through these files, and they are a nightmare to read, you'll see all the scene options, as well as each actor (referenced by their ID) along with their properties and rules. I was able to do a find/replace the camera origin x value.

but be very careful working with these, for every time I got it right, I also ended up with an totally hosed project. There is a high level of failure, so I always make multiple backups and test the hell out of it after every change.

jonmulcahy

@Fal01 said:
jonmulcahy,

On your home screen where you have PLAY LEVELS CONTROL CREDITS, how did you make the options toggleable? ie highlight each option using the controller.

I have rules in that scene that say

when dpad right = true
OR
when leftstickX > .25

then mod(menuSelector+1,4)

and

when dpad left = true
OR
when leftstickX < -.25

then mod(menuSelector-1,4)

what this does is based on the controller input, will toggle the menuSelector attribute btween 0,1,2 and 3. I then have rules that basically say

if 0 play is selected
if 1 levels is selected

It gets more complicated when you have multiple rows of stuff, I have to track what row and column they are in, but it wasn't too difficult to figure out.

jonmulcahy

@freneticz said:
I want to see the code for gamepad so i know if i understand right.
My Fire TV will hopefully come next week(with 2 gamepads) want to have a game ready to test........co op FTW

I posted a sample joystick demo awhile back in another thread, but here it is again

jonmulcahy

I got most of the achievements worked out last night, I just have to add the stage complete achievements on every 10th level. Tonight I'm going to be doing a full build and testing it out, I know there are some trigger issues going on, but I gotta test on the device to give it a full run-through.

Fal01

Thanks for that.

beefy_clyro

Thanks Jon, thought it would be something like that!

jonmulcahy

I actually think I've fixed all the know bugs. I know there are probably more towards the end of the game, mostly with where things spawn. I tried to adjust them as I was tweaking the camera controls, but the odds of getting everything on the first try are pretty slim, but I'll catch them during the full play through.

Today I was thinking about the sound design of the game. The game takes place in place, where technically you won't hear any sound, yet you hear footsteps as you walk, and landing hits. I'm toying around with updating most of the sound effects:

1. remove footsteps
2. remote landing noise
3. keep jump grunt
4. tweak dark matter pickup sound. I want it to sound more like a computer indicator that something was completed, it's a little too organic right now.
5. the portal sound. I have a sound that happens when you open it, and another when you fall into it. It sounds nice, but it's not really practical.

then again, it is just a game, so maybe I'll keep it all in? I'm going to have to run some tests, it might be too quiet without them.

jonmulcahy

I'm going with a hybrid approach with the sounds. I toned them down a bit but I am keeping them in, it seems too naked without them.

I started filling out the amazon description today. Tonight I need to take screenshots and put together the preview video, and of course test test test. I've been doing all my testing with the remote, tonight I will be testing with the game pad as well.

so far so good!

beefy_clyro

Video you playing it on tv .. I want to see

I was going to say keep the sounds as well, who cares if its not strictly space representable, it'll add to game impact regardless

jonmulcahy

@beefy_clyro said:
Video you playing it on tv .. I want to see

I was going to say keep the sounds as well, who cares if its not strictly space representable, it'll add to game impact regardless

Yea I'll take a video tonight after the kids are in bed

jonmulcahy

quick preview

jonmulcahy

Preview of the game running on the Fire TV using the Remote for control:

RThurman

Oh wow! That looks fantastic!
I might have to get my cheap heiney off the fence and buy a Fire TV just to play your game.

goliath

Looks VERY nice on the big screen. This is another reason why I have decided to get back into game design. Seeing this on the big screen TV makes me want to see my games on there.

Great job man. Please keep posting the videos.

jonmulcahy

thanks @RThurman @goliath !
I'm going to be recording another video today, with hopefully better lighting, showing the gamepad controlling the action.

as impressive as it looks in the video, it is 100x better in person

BBEnk

Which Fire TV are you using the console or stick?