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!
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
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
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
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.
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.
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.
Lossless compression, when the file is uncompressed the information is still "stored"
|transparancy||Larger file sizes|
|Great for text|
Lossy compression, everytime you open and edit the file, the quality will degrade, every export will permenantly delete "the compressed" data
|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
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.
I am using Robert Kleffner's Mario HTML 5 ported from the Java version by Notch (Markus Persson).Link to code
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
2 | Next we click inside the "Images" Folder
3 | Open an image in your editor of choice
4 | Replace the image
5 | If your new image has the same name and proportions it should now be running with your new image
Now only 14 more images to change and we have our awesome custom modded game!
Someone please make this with turtles!
Next we are using Tappy Chicken from the Unreal Sample Projects Link to code
1 | Here is the project opened in the editor
2 |Next we have to find the assets
3 |Edit the image
4 |Reimport the image
5 |Now the game has been modded!
Notice the similarity in both engines, the process is the same. Find the assets and change them!
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"
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!
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