× Home Games Learn Contact Links Donate

Chapter 2

Files and Formats

What are we actually modifying?

Personally I reccomend trying out all the different game engines we have talked about so far. Try and find your favorite for each "type" of project you work on.

Even with all these different game engines and coding languages most of the file structures and expected file formats are the same!

For example:

Phaser is a light weight Javascript game engine, there are no "visual ques" or drop down boxes, just a library of functions you can interact with. This makes it perfect for simple 2D HTML 5 games, with low load times and simple functionality eg "PONG" and "SNAKE"

Below, left is typically how a javascript games coding will look, Right is GT3000 's awesome Turtle Snake game!

phaserdemo trtl snake

Unreal engine and Unity on the other hand are mammoth C#/C++ engines with user interfaces including full 3D shaders, ray tracing dynamic lighting, multiple camera setups, cutscenes... the LOT!

Left is the main "Scene" view of UE4, Right is some Blueprint coding

unreal blueprints

These engines allow you to make full "AAA" games for high end hardware and they are also pushing the boundries of what we expect to see from "mobile" or "browser" gaming.

Just look at "Fortnite"(Ue4) or "Oddworld- New 'n' Tasty"(Unity) on mobile

fortnite abe new n tasty

You can still make small simple games on UE4 and Unity, but expect longer load times and larger file sizes due to the BIG engine that your game is running on.

Left UE4 Tappy chicken, Right Unity Temple Run

tappy chicken UE4 temple run unity

What is a Video Game made of?

At its core a video game is a set of images and sounds with some code telling them to do different things at different times.

E.g.

Player Presses "LEFT" button

Character Moves "LEFT"

Character Sprite changes to "WALK" animation

Play walking sound

Player lets go of "LEFT" button

Character stops moving

Animation changes to "IDLE" animation

Stop walking sound

Along with our images and code will be the "GAME ENGINE" you have chosen to use. This will be the main brain and framework of your game that all these images, 3d models and code are running in.

File Formats

The most common type of files we are going to see are "Png" and "Jpeg"

But dont be suprised to find some ".psd" ".tga" ".gif" ".tiff" ".svg"

On first appearence they all might look the same, but they have a variety of different uses.


PNG

demo png

Lossless compression, when the file is uncompressed the information is still "stored"

Pro Con
transparancy Larger file sizes
Great for text

Jpeg

demo jpg

Lossy compression, everytime you open and edit the file, the quality will degrade, every export will permenantly delete "the compressed" data

Pro Con
Small File size NO transparancy

So a big background picture may be a "JPEG" 1080p image. Where the character sprite would be a "PNG", sprite sheet with multiple images and transparancy.

But there is always the posibility that neither file type is used, and instead the characters and shapes are drawn with primitive components or referenced in external libraries

Drawn with HTML 5 canvas components

turtris draw blocks code

In these situations, the game can still be modified but some coding experience will be required!

Lets have a look at a couple of projects.


Javascript Project

I am using Robert Kleffner's Mario HTML 5 ported from the Java version by Notch (Markus Persson).Link to code

Word of warning, this code did come with a nice javascript crypto miner hidden under "midi.js"

Always take caution when downloading from "unknown" sources

1 | On the left is the game running in the brower, on the right the main file structure

mario java

2 | Next we click inside the "Images" Folder

Image folder

3 | Open an image in your editor of choice

open image

4 | Replace the image

edit image

5 | If your new image has the same name and proportions it should now be running with your new image

mario mod

Now only 14 more images to change and we have our awesome custom modded game!

Someone please make this with turtles!


Unreal Engine (UE4) project

Next we are using Tappy Chicken from the Unreal Sample Projects Link to code

1 | Here is the project opened in the editor

tappy chicken

2 |Next we have to find the assets

find tappy assets

3 |Edit the image

edit tappy assets

4 |Reimport the image

reimport tappy assets

5 |Now the game has been modded!

modded flappy turtle

Notice the similarity in both engines, the process is the same. Find the assets and change them!


Conclusion

So, the most important information we need to get from the game we are modding is the "size" of the images and the "file types" we need to modify!

If the player is a "32 x 32" pixel "sprite" and they have 8 "frames" to an animation, expect to see a "(32 x 4) x (32 x 2)" pixel image "128px X 64px"

8 frame sprite

We want to make sure we replace the image with one of equal size and dimensions so any code that is used to cut up and animate the sprite does not need to be changed. For simplicity we want to keep the name identicle for now, but when you feel more confident, try and find the references to the image(s) in the code and rename them yourself!

look for images to replace

The green highlighted text is "images"

If all this code looks like a scary mess dont worry! It can be put through a js beautifier if you are working on it properly to reformat it