Posts tagged with "real time strategy"

Making a simple RTS game – Week Three

So week two of making an RTS was September 2nd – 9th. Almost three months later I’ve managed to spend most of my weekend on it. 😀 This is pretty typical timeline of any of my personal side-project’s. *sigh*

So I started on Friday after having a burger and beer at the ingeniously named Burger and Beer doing some work on graphics. Even though I haven’t put any work into the game I had been thinking about how to make things easier since I’ve decided to make an RTS game as my first game while learning PhaserJS. Not exactly the easiest idea to go for, snake or space invaders would have been much easier 😛 . So I decided to ditch my idea of having actual units that would require a lot of animation and switch to a space theme as spaceships seem easier overall to animate. I bought “Space Shooter Creation Kit” from Gameart2d.com which was only $13.50 USD so pretty reasonable cost for a hobby project.

To begin with I really only need two sprites, one for a “fighter” and one for a “worker” so the following two seem to do the trick for now:

fighter-fire   worker

After that I decided to redo my tile map to match the space ships, I decided to just look for an image with a free to use license of space because how hard can that be, but space seems to be pretty low quality when zoomed in so I did end up having to do some editing of what I ended up finding. The result of that was this:

elementalrts-map-preview

After implementing the new images in Phaser that was pretty much my Friday.

Saturday and Sunday (today) was spent trying to get units to move based on cursor movement, overall an hilarious experience. I spent a lot of  time laughing at the worker unit going out of control when I had bugs in movement and/or physics code.

Saturday I was attempting to actually get the functionality required, which is using the selection box to select units and then clicking a location to move those units to that location. However trying to do all of that at once was proving to be very confusing so I decided to first figure out how to get the sprite to move to the location clicked by the cursor. That worked easily enough as there are some in-built PhaserJS functions for that functionality, however since I don’t really intend on that being the functionality I ended up having to write some of my own functions so that when I have the selection group working the movement will work with it also. Doing that took most of Saturday and Sunday, my next challenge is getting the sprite to rotate to the moved location.

Lastly I realised I can host the whole thing on Github Pages since I have the code up in my github repository so throughout development this url will always be the master version of where I am at.

I’m hoping there won’t be as big of a gap between week 3 -> week 4, however next week is already looking pretty hectic so it is going to be delayed.


Posted on November 27, 2016

Making a simple RTS game – Week Two

So week two has gone relatively well, I didn’t spend as much time working on the game as I would have liked, it’s hard going from programming at work to programming at home every day. However I persevered and at least made some progress.

I ended up making a map since it was hard to try develop controls and camera without having anything to see, I found out about Tiled which is a free tile map editor, very easy to use. Not wanting to waste my time on trying to create graphics (and hating whatever I ended up making), I browsed /r/gamedev for some free assets to do for the moment, turns out this Kenny NL guy has some amazing stuff for free up there. I ended up going with his ‘Topdown shooter pack‘ as it seemed visually appealing to me.

Next step was figuring out how to get the cursor (arrow) keys to work as input, once I figured out how to do that I set those keys up to handle the camera movement. That was easy enough.

After that I wanted to deal with the mouse moving the map when near the edges of the screen, that proved a little more difficult, but not too bad.

My main achievement for the week (and the hardest part) was having the mouse create selection boxes, as you would in Windows etc. This will be used later on for selecting units & buildings. This proved more problematic as I first started out using the built in Phaser Rectangle Object and setting the (X,Y) to the point where the mouse was clicked and having the (width,height) update to where the mouse is before the left click is released. The first issue was my map is larger than the actual screen so it wouldn’t work once you scroll.  Not helpful 😛 Luckily I then realised I could just add the camera.x and camera.y positions to my initial (x,y) points, presto all good!

Lastly I realised that I shouldn’t have used the Rectangle object at all as the only way to fill that is by using a debug function in render (not what I intended), so I ended up having to switch that over to using game.graphics instead.

Also as a note I started making the UI for a mineral count in the top right (thanks Game Icons), doing it in jQuery as I couldn’t figure out how to do graphics on the screen at the time, but after going through my selection box stuff I now realise I need to re-do that part.

I’ve come to realise some things are going to be more complicated than I anticipated, for instance implementing a mini-map I am kind of dreading. However overall working with Phaser has been great, there are lots of resources out there and the community in both Slack and IRC are very helpful.

Here’s a crappy video of where we are so far:

I’m unsure if I will have enough changes to do a Week 3 next week as I’m currently in the process of finding a new place to live in London and it’s a whole insane experience itself, very time consuming, very tiring and very depressing financially. So week 3 might be on the 23rd, we’ll see!


Posted on September 09, 2016

Making a simple RTS game – Week One

So I’ve decided I want to make a game again, nothing crazy just a simple RTS game, browser based (mainly for speed of development and that I’m interested to see what it’s like),  I’ve decided I may as well blog along the journey to keep myself motivated and prevent quitting mid-way through 😛

I might also do some videos & live streams as we get closer a prototype and there is actually something interesting to watch me doing rather than researching things. So watch this space. 🙂

So far stack wise I’ve decided on using the following tools:

  • Phaser.io – Open source HTML5 Game Framework
  • Socket.io – Real-time bidirectional event-based communication.

I need to find a tool for making tile based maps, but I’m not too concerned about that right now, I’d prefer to start with controls, units and economy before jumping into anything too graphical and getting demotivated.

I think plan wise of order of doing things will go like so:

  • Controls
  • Camera – Camera movement etc.
  • Units – basic movement and control
  • Economy – basic income system
  • Unit Types
  • Unit Attacking
  • Map – singular
  • Game State – Playing, Game Over, Winner etc.
  • Lobby System – Find Game etc.
  • Chat

I’ve probably forgotten some thing’s but that’s just a kind of overview for now, I’ll probably make a Trello board and share that at some stage.

Graphics wise I’m worried, I’m intending on the graphics for the game to be super basic, probably just spheres initially, if I am actually enjoying how the game is progressing I’ll either put myself through the pain of trying to do graphic design or (more likely) pay someone to do it for me.

Anyway that’s all I really have to say on this for now, I’m going to try do weekly updates if not bi-weekly. Hopefully motivation will stay with me! 🙂


Posted on September 01, 2016