Hello reader!
I am going to start a build series of a HTML5 game.
I am really interested in HTML5 since flash is officially starting to be taken down. The HTML5 world is growing so fast and I want to walk around in this world of HTML5 game development.
I do not have a official game in mind, but I do know I want to put some mechanics of one of my all-time favorite flash games “Swords and Sandals” in it. I have lately been playing this game with a friend of my on our mobile phones. It brought so many memories and this made me think I have to do something with this game.
I will try to post an episode every 2-3 weeks, but I can not predict anything happening at work or in my personal live. I will aim to work at least 2-3 evenings a week to work on this build series.
I already do have some experience with HTML5 game development. So was one of my first assignments at my current work GamePoint to make a Facebook Instant game about one of our most played games RoyalDice. This game is called Royal Dice Mini and is playable through the Facebook messenger application!
You can play against your friends or play the single player story! Your goal is to collect as much crowns as possible to compete against your friends in the high scores!
What will we be using?
The tools I will be using for this build series are:
I will use Komodo as IDE, why? Because I never worked with it. I normally work with web development tasks in Sublime Text. But since I have worked with Jetbrains Webstorm I noticed it was much quicker to create web applications. But as you might know, Webstorm is quite expensive. I have read Komodo is a great IDE for HTML5 so I thought, why not trying it out?
I will use PixiJS as library. PixiJS is a so called HTML5 render engine. It supports canvas and webgl rendering. I personally only have experience with PhaserJS but have heard a lot of great things about PixiJS. So I thought again, why to giving it a shot? 😀
Photoshop will be used to create assets. Please do not have highly expectations of my art (I call my art, development art) but maybe someone will help me out with the art in the future. 🙂 (If you do not have Photoshop, my personal recommendation is using paint.net)
I will use Blender in case I want to add some 3D in the future of the project. Or in case I want to make some art looking like it is 3D I will most likely pre-render it from a 3D sculpture. 🙂
Opera is my personal favorite browser out there. Ever since I heard about opera (since I was 11 years old or something) I have always been using it. I do not have a solid argument why I always did, but I always feel somehow connected to opera browser.
I will use Facebook to add some more social features to our game using the Facebook instant games API.
What is HTML5?
As I quote from my first google search result:
“HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.”
HTML5 has some great features for us to being able to build a game in. So does HTML5 have a canvas which we can code in using JavaScript! To go even further we can combine it using WebGL which is a JavaScript API for rendering interactive 2D and 3D graphics.
My favorite part of HTML5 is that is can be used for multiple platforms. You can play a HTML5 game in a browser on any device.
Concepting
Throughout the series I would like to change my concept by asking my followers on Instagram what decision to make. But whenever you start on a new project or feature it is good to have a first MVP (Minimal viable Product)
My first MVP will be to recreate the mechanics of swords and sandals (if you do not know swords and sandals, please watch this video https://www.youtube.com/watch?v=C_bpZwjUqZI).
This means in my first episode I will create a basic interface with a player being able to choose between three attack options and the option to move left or right.
Normally I would say to make a good planning using MoSCoW and scrum, but I want this build series to be building without limits. Any idea should be implemented and tested to see if it is fun or not. This way I want to give you the freedom to build what ever you like, with this series as a base knowledge.
You.
I would like to involve my followers into this process. Whenever I have an idea I will post an Instagram story to ask you what your opinion is about it. Or I will post a poll where you can choose between A or B.
This way we will make a fun and entertaining HTML5 game together. 🙂
In case you have not but want to be part of this build series, feel free to give me a follow on Instagram @justinbieshaar
Thank you a lot for reading! Let me know your thoughts in the comments.
– Justin Scott
(This is a hobby project, totally build out of own interests and willing to share my knowledge with the internet)
HTML5 build series pt 1. – Scene management – Justin Scott Bieshaar
[…] Hello reader!Welcome to part 1 of my HTML5 build series.We will start off with creating a scene management system in JavaScript.If you haven’t read my introduction about these episodes yet, feel free to read it here: https://justinbieshaar.com/2019/04/06/build-series-introduction/ […]