Dev Challenge Intro / Outro - HALO
Introduction
This is an workshop challenge provided to me by Maikel. For This challenge I got as assignment to recreate an intro/outro of a game using only Vanilla HTML/CSS/JavaScript. Without the use of any frameworks and external libraries another condition was is that it has to work within a browser at the resolution of 1920x1080.
HALO - Combat Evolved Intro
For this challenge I’ve remade the credits/outro of Halo 1 CE and added my own twist to it by modernizing it. After making the outro, I also made an Halo menu as well Identical to the first game, just to give viewer the feel as if you’re actually in the game and playing it.
I’ve added the following features to this game:
- Moving SVG animation
- Tooltips pop up
- Custom mouse cursor
- Moving background (video)
- Added shortcuts (e.g. Esc button to return to menu)
- Fade-in/Fade-out animation
- Timer
- Halo music (Ost)
- Credits animation
Process
At first I started with making the outro for the challenge, Since I no longer have the old Halo cd disc anymore, I wasn’t able to boot up the game and examine the credits screen, the modern version of Halo Combat Evolved of gearbox and the anniversary version neither had this credits screen as well, so it made it very difficult to find that iconic original visuals of both the credits and menu screen of the game.
I did find a Youtube link with someone still having the original 2001 version on PC, where I was able to inspect everything.
The SVG animation which I made for the outro was made using a tutorial, because I was still new to this and I had no prior experience in animating SVG, I made sure to keep the code neat and organized for this.
Since this whole challenge was intended to be 2 weeks, I had still plenty of time left, so I decided to add a menu as well.
More on this can be read in my Gitlab repository, the links are in the appendices.
Feedback
Maikel: “Very great, you clearly spent plenty of time on this and that’s very noticeable. The details of it make it a very nice experience with addition to (Video’s, cursors, sound effects and tooltips. You did examine the original version of Halo and implemented several techniques. But remember that some of these techniques aren’t really necessary to make it work, since you can combine them. And I noticed that you have an unused JQuery in your code that isn’t being used.”
Reflection
I had enough time to work on this dev challenge, where I ended up not with a outro, but also a main menu, but I’ve to make sure next time to keep out the stuff that I don’t use out of the code, which makes reviewing the code difficult and confusing and adding file structure is necessary to keep the files organized and separated from one another.
This challenge gave me plenty of knowledge and motivation and I’m willing to implement some of these techniques I learned in other projects for Frontend and to further challenge myself, I also will make a part 2 of this challenge.