Hi there!
My name is Miquel Camps, I'm a web developer based in Spain, you can find me on twitter and linkedin.
TLDR: You can visit the Resume website here
https://vivirenremoto.github.io/commandos/en.html
Do you remember the Commandos game?
In my case it was one of my first PC games, I remember saving and loading the game hundreds of times to pass each mission.
Some time ago I published here in dev.to how I made my resume based on the Age of Empires game and today I wanted to show you my new resume based on the Commandos game.
Check it out
https://vivirenremoto.github.io/commandos/en.html
Mini game (the alarm icon)
https://vivirenremoto.github.io/commandos/en.html?alarm
How it's made?
I didn't start from scratch, my starting point was the code I made for the age of empires CV.
I just changed the images and that's it? It's true that in both cases the navigation is similar, you move a character and when you pass over an object information is shown, but is not the same at all.
To be honest with you in some things I think the Age of Empires CV is better, the terrain, trees and the weather are generated randomly, if you reload the page a few times you will never get the same screen. but I had some limitations and I will take about them later on.
The first step to make this is to collect many resources as posible: images, sounds, music.... in this Commandos CV as I told, I was really limited about Assets, for example I didn't find sprites (images without background) of trees, terrain, buildings of the game, but I found images of soldiers and vehicles on this web.
https://www.spriters-resource.com/
At first I was thinking of putting vehicles instead of buildings like Age of Empires CV but I was not convinced of the idea, then I found the sprite of a parachute and that's where I remembered a mission of the game and I came up with the idea of the boxes falling from a plane, each box represents one thing about me (skills, experience, my stuff, tools).
At the beginning the playable character was this soldier, because I didn't find any sprite or gif of Jack O'Hara - Greet Beret
When I had a first version I sent it to some friends and all told me the same: "Man!!!! Where is the F**** Greet Beret!!!!"
As I said, I didn't find any GIF of Green Beret running, so it was an odyssey to create the animation by myself: I had to install the game on my PC, record a video, cut the video, export it to gif, remove the background of the character in each frame pixel by pixel (8 frames), move each frame to the correct position and finally export the frames to gif, it took me some mental health to do it but, I am very happy with the result.
Next I will tell you how I did some of each elements.
How I made the animation of the flying boxes and the parachute?
jQuery has a method called Animate that allows you to make fluid animations, which is the one I used to make the top position change from point A to point B.
The parachute is a static image, that I reduce it the height to zero and maybe this a is a joke to you, but I'm proud myself about the result haha.
What about the flying plane?
I took the code that I did of the eagle of Age of empires, but in this case the plane only appears in one point, as curiosity at the beginning I put this sprite
But I thought that it was not realistic that later the boxes appear from the top, so I put to the plain image brightness to zero and applied with css opacity 0.5, so that it had the appearance of a shadow.
As a curiosity I tried to put some blur filter effect to the plane shadow with some CSS but it was too realistic for this pixel art style and I removed it.
How I made the audios?
I found all the music, sounds and voices on youtube, there are several websites that allow you to export only the audio as mp3, then i cut them with the free and opensource audio editor Audacity.
What about the mini game pilla-pilla, cops and thieves, catch me if you can?
Basically there are 4 soldiers that run randomly to a point x-y, when they reach the destination another point is generated and so on until you catch them, here there is no artificial intelligence where the CPU escapes from you.
To make it a little more difficult, especially on mobile that the screen is smaller and you could pass the game without doing anything, I put the condition that you have to touch a soldier while running, so it is not a bug is a feature!
What limitations have I found?
Apart of the sprites, I'm not convinced at all that you need to made a click to play an audio in the browser but I didn't find any other solution.
What could be improved?
Everything can be improved, for example a collision system is missing, the background is fake, you can fly with character over forests, water and buildings, but hey! it took me around 3 days doing this in part time, so it's not bad at all, right? :)
Thanks for watching
I hope you liked it much as the Commandos game, if it's true I appreciate a LIKE and I really appreciate if you can SHARE IT to friends, family or coworkers who like this game.
Take a look at my other resumes
- How I made my Resume, based on Age of Empires
- How I made my Resume, based on Mario Bros game
- Ever seen a 360° resume?
Disclaimer
The Copyright policy sets out information and rules for respecting Kalypso Media's copyrights and trademarks in its works. In order to reproduce any of Kalypso Media's content, including images, characters, storylines, or text, we must have Kalypso Media's clear permission to do so.
Top comments (0)