Developing Own Game Using HTML Elements

Let’s go back some years. Actually let’s go back 20 years. In the beginning of 2000s our family bought another electronic device. This time it was a brand new computer. The processor was 400 Mhz. It barely ran some games like Diablo II, Hitman, Tony Hawk’s Pro Skater 2 and Colin McRae Rally 2.0.

This was a time when HTML was the most popular way to make websites. And websites were definitely more simple than they are today. You could even use some WYSIWYG editor like FrontPage or Dreamweaver. The scene was very different than it is today. Internet was accessed mainly with personal computers screens instead of mobile devices and tablets. CSS was already available but JavaScript was a bit different than it is today. If you had will and skill you could learn something like PHP programming or you could even get into databases.

So this was a time for me to get to know how a web browser basically works. I didn’t get so deep in this topic back then. But I did design some websites. You could say that making websites was my hobby. It took me ten more years to actually apply to study programming. I have been interested in computers for a long time of period. And finally I ended up also working in this field.

If you know some HTML you understand that there are elements, like headers, paragraphs and images. You can interact with the system by clicking links and hovering the mouse cursor over some element. All this is done as you run a website on your web browser. HTML displays the structure of the site, CSS styles, sets the colors of fonts and backgrounds of div elements, and JavaScript handles events and manipulation of the elements presented. All this is done inside the web browser.

There are different web browsers available. Today, they don’t differ form each other that much. Back in the day there were wars between browsers. You had Internet Explorer that understood JavaScript in it’s own way. You had to produce code that could be handled in every browser that existed.

This text is nothing like a tutorial in game development. I decided to write this blog post to give you an idea about how you can approach this topic. You don’t necessarily have to start learning something heavy like C programming or OpenGL. You can start with something like HTML. Some might say that it isn’t a real programming language. And actually it really isn’t. It still provides you some ways to create something that can be used when developing a real game.

You can even use a database in your design. You can also use a JavaScript framework like React or Vue or something like that. Making a website is easy and fun. You can make your website to be a game. If  you don’t think that you would want to make a game that can be run in a web browser you can also find tools for converting your game to a desktop application. Only the sky is a limit in this matter.

Dreams of Making a Video Game

I woke up today a bit early. I put on my headphones and started listening music and browsing internet. The sun was rising. I just had to take this picture with my phone and share it with you. But let’s get to today’s subject. Have you always dreamed of making your own game? Well, I have.

It started with playing games as a kid. As I grew older I started to get a sense of what gaming really was. I wanted to make a game. I was also fascinated with designing websites. While I was studying in high school I started to think about my future and what I would want to study after it. I though a lot about trying to study something that required creativity. I was also a decent math student. Finally I decided to go for math and physics instead of studying art.

My life has been a one big trip. I finally got to studying computer science in 2010. Since I started I had a dream of some day developing a game or at least a nice looking dynamic website. Things didn’t actually go that way. After graduating I found out how hard it was to get a job in the field. However I did program a game. It was text based adventure game.

This wasn’t the kind of game I had dreamed of making. The game I imagined was graphical adventure game that had discussions, small puzzles, some kinds of graphics and lots of interactivity. I wanted to create something special. I lacked skills in creating graphics and programming.

The dream didn’t seem to disappear. I still have it. I know some programming but the task seems to be too difficult. I have tried to get into Python (PyGame), Java and JavaScript but it seems to be too hard for me to learn effectively. I don’t know what happens to this dream as the time goes forward all the time. I admit that it’s a bit sad.

So designing games hasn’t been the job that would fit me perfectly. But maybe that’s why you dream. You can imagine what you might some day achieve. Just remember that it’s hard work to learn something so deeply. And before you try your hand in programming just remember that it’s hard to get into. But if you are really talented just go ahead. I know some very talented programmers that have made it. And keep dreaming even if you achieve your goals. There are so many different ways for a person to develop himself or herself.

Tools for Building Your Game

Do you want to know how to actually make a game? Do you have an idea? Let me tell you what it is about and what skills you must learn. You might already have a friend or two that are talented in for example doing graphics or making music with personal computer. Why wouldn’t you get to understand how to make your game? And wouldn’t it be fun even if you wouldn’t actually end up releasing a game?

We will start with 3D modeling. There is this method to make a 3D featured game. You will have to make all the objects that the player encounters and also all surroundings and so on. If you want to make a game that has only 2D graphics that’s ok. But in this blog post we are dealing with 3D environment. So for making animations and 3D models you have to learn to use Blender. Or one of your friends has to. You probably need also skills in programming OpenGL which is based on C++. SO you need to know programming also to “make things click”. you have to have a way for the player to interact. So you need input from player. This is also made possible through an interface that has to be programmed. Making a game isn’t actually all programming but it isn’t all creative thinking also.

You don’t have to make your game with C++. You have a wide variety of different programming languages to choose from. You can make games with Java. I have been fiddling around with SWING. It is quite easy to make a game with a GUI but no graphics. You can make for example a role playing game with a deep plot. There are also some game engines for you to choose from (in Java). Some of them are engines like LITIENGINE and LWJGL – Lightweight Java Game Library. You can find more information about them … again … from your favorite search engine. (Or I might write about them some day). Android is also build with Java. So you need to learn Java if you wish to make a game for a mobile device that runs Java.

What about Python? You might have learned basics of programming from some course for example with it. Python is very good for many purposes. You can make games with Python. Then you would maybe want to learn about Pygame. There is also a funny library for Python for making games that have ASCII graphics (and only ASCII graphics).

You can choose C and C++ and then you are again going to the direction of using OpenGL for so many things. Have you ever made websites? Then you must be familiar with things like HTML, CSS and JavaScript. This is one way for you to make a game also. You can even use a library like Phaser that is based on JavaScript. You can also make your game with C#. You can also make something out of SQL or databases.

There are also some other ways to make a game that I haven’t yet mentioned here. There is basically tools that are built for making games. So they act like software that you can code and design your game with. Some of these tools are Game Maker Studio, Stencyl and Unity.

We have dealt with programming and 3D modeling. But you need also something else. You need graphics or to say it more precisely you need textures. Textures form the surface to your 3D models so they will look like they were actual objects in actual real world. Or that is their goal since a clever player always recognizes that he or she is playing a game and it’s never a real life situation. But, you need textures, right? Your tools for accomplishing this are free tools like GIMP and/or Paint.net and actual paid software application Photoshop. These tools are powerful and you have to learn to use them if you wish to make a game.

Some graphics can be made from sprites. So animation needs many still pictures that finally form the desired animation. But let’s think that we are building a game with 3D environment so we will stick to using Blender for the purpose.

Okay. What about music? What about sound effects? A good game has a dedicated soundtrack, right? You can make your own music or you can try to contact some independent artists. You can find these artists from SoundCloud or if you can speak in Finnish or at least in English you can try to talk to some artists in Mikseri which is a Finnish platform for releasing songs as mp3s on internet. But those are your options, basically. And music you can also find from YouTube. Try asking from some artist you dig.

You can find lots of sound effects online. You can try Freesound.org for example. Sound effects might be hard to make. It helps if you have a good quality condenser mick. These come nowadays with USB connection and they cost about from forty euros to several thousands. I would myself prefer a good and cheap mic for testing to record something. You can get creative with this. Slice an orange maybe and record that sound. You need to handle the audio clip. So you need skills in using an audio editor like Audacity or any other audio editor.

If you really want to make your own music to be played on the background you need to master some DAW. There are free DAWs, like LMMs, and ones you have to pay to use, like FL Studio or Renoise. There might be free to use demo versions that have some limitations. Some free DAWs I actually haven’t tried to this day are Pro Tools First, Ohm Studio, Cubase LE and Ableton Live Lite. I make my music with FL Studio.

You probably need some instruments. And I mean “virtual instruments”. There are lots of free VST instruments and effects. Some tools come with VST plugins and you can also buy them if you really need. A MIDI keyboard is a good thing to have. So you can make all the melodies with your virtual instruments. It doesn’t hurt if you have samples or if you have a friend that can play some guitar so you have all the diversity that is needed.

You will also need some gear. If you want to record vocals while you are listening to your instrumental at the same time you need headphones. Want to know why? Your voice starts to circulate if you don’t use head phones and you basically don’t want that to happen. You might also want to use monitor speakers. I have spent under 1000 euros for my studio, well if you leave the computer out…But you don’t actually need a super fast computer for making music. You can use your parents desktop really well. Just something that runs your audio software and has some space for your music. And you can buy for example a licence for OneDrive pretty cheaply so you would have 1 terabytes of space.

The last thing, I promise this is last in this long long blog post is about big data. What the f has big data to do with gaming, you might ask. It has every effing to do with today’s gaming. You ever think about how much data is moving in mobile activity all the time. There is also data to move in games. This can be something about how you make your choices in the game or what kind of weather happens to be or what time of the day it is. All this makes games very realsitic. But you know what? It makes them more boring. This is purely my opinion. But keep in your mind that there is a lot going on inside the game when you play it.

 

Different Platforms For Releasing Games

You might have thought about releasing your own game or you might just be curious about what platforms can be used for playing games. This is interesting for me as a programmer so in this blog post I am going to open up a bit these different ways you can today play and even design games.

I have been making websites as a hobby for very long time. I started back in the 90s. To be precise it was the end of 90s. Back then we didn’t have any mobile devices at all. Bluetooth wasn’t where it is today. I think there even wasn’t this thing we call USB standard. So if you had a PC you had to plug in your gaming pad some other way. I don’t recall what that way was. Basically if you wanted to play with game controller you would be preferring PlayStation over PC.

But what I was saying is that one platform that you can make games on is the web browser. You can develop your game with only HTML, CSS and JavaScript. If you make a game this way it is very easy to release it. You just have to upload your game to a web host. There are places on internet that actually sell these games also. So this is one way to make a game.

You might want to go mobile. This means you have to learn Java and after you have mastered it you must learn software development in Android (or iOS and ´the programming language that is used with it). I have tried my hand at Android development. I found it to be very hard. So I gave up on this idea. But this isn’t what you should do. If you have an interest there’s nothing that can stop you from downloading the appropriate IDE (Integrated Development Environment) and start working on it.

One way to release a game is on some gaming console. This is a bit harder since manufacturers of gaming consoles tend to have a sense of control over what kinds of games are being released on their systems. Sometimes you even need a specific development kit for the desired console. So this is a hard way for an independent software developer. It can also cost a lot of money. This way includes also handheld consoles like Nintendo Switch Lite. You might notice that Nintendo is going in it’s own direction as it doesn’t really care so much about mobile gaming.

You can also release a game for an old gaming console. You probably don’t have an appropriate development kit but I can assure you that there are lots of software tools for accomplishing this. So you actually can make a game that is playable through emulator. You can use emulators to play old games on a wide variety of devices that include smart phones, computers like Raspberry Pi and personal computers. There are emulators for playing games of for example Commodore 64, NES, SNES, Master System, Mega Drive, MS-DOS, PlayStation 1 & 2, Dreamcast, GameCube, Wii and many others.

There are also many operating systems that games for PC can be released on. There is Windows, right now it is Windows 10, and many versions of Linux (like Ubuntu). There are also Linux distributions that are dedicated to retro and emulator gaming. I can name some of them. There is Lakka OS, RetroPie and Recalbox just to name some of them.

If you don’t want to release your game for free there are many online software stores that can be used to sell your game. There is Steam and GOG which are big names that have numerous amounts of games available. There are also lots of other options that you can find using your favorite search engine.

I didn’t go to what tools you can use for developing your own game. This might be a good time to have a break. I will come back with another post for you very soon. It would be a good idea to present for you some tools that can be used for developing a game for Android, Windows, Linux or for web browsers. This would be interesting wouldn’t it?

Social media & sharing icons powered by UltimatelySocial