Posts tagged with "Javascript"

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:

Attacker Unit Worker Unit

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:

Map

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 would not 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, and it is 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:

Video of game functionality

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

Being a PHP Developer in 2015

Generic coding image

This is just some thoughts on being a PHP developer in 2015.

A standard web project before used to just require you to setup a local web server, and then you’d upload to a standard web host with some worries about PHP versions perhaps but little to no thought required for the server side of things.Frameworks were a new thing, CodeIgniter was (to me at the time) the best thing to happen to PHP, introducing me to PHP MVC patterns, easily integrated vendor libraries (I never got into Zend Framework) and Twig .

Now a web project involves using programs such as Composer, Bower and Grunt just to manage project dependencies. Then you have PHP & JS frameworks like Symfony , Laravel, AngularJS that have really made life so much easier for us developers. Of course this all comes at a cost of having to put in time into learning all these new frameworks and tools, but the benefits of doing so are just amazing; development time goes way down and you create much better products. I wish I could further go into the benefits of each but they all require posts of their own to really get across their individual uses, I’ll attempt to get to that!

Working with UNIX servers is pretty standard for most web developers now, myself included. I’ve been using DigitalOcean for all my hosting, they really are a great host and I recommend them to anyone searching. Anyway a tool I found lately for server management which I guess is what has caused this post is Ajenti , before this I was using ISPConfig for the aim of being able to manage my servers easier than via ssh, however I found it’s interface pretty clunky and just overall slow, always ending up in ssh. After testing Ajenti in a fresh droplet I changed completely over to it on my other servers, so far it’s been amazing, I’m still using ssh here and there but overall Ajenti has really solved my problem so thanks guys. The install was amazingly simple too I recommend anyone looking for a GUI for their server to check it out.

So there seems to be a lot more to PHP web development now in 2015 than there was just a few years ago, though I personally feel all of it is for the better, making my life easier. It makes me wonder what it will be like in another few years though, whats next?


Posted on January 27, 2015

Populating a Form with a dropdown (jQuery)

I thought I’d share this, maybe it’ll help somebody else. Basically this will take the value of the drop down (select) and show() that many input fields.

Javascript

$(document).ready(function(){
$("select[name=example]").change(function () {
$(".hidden_input").hide();
var cnt = $("select[name=example]").val();
while(cnt > 0) {
$(".hidden_input#"+cnt).show();
cnt--;
}
});
});

HTML/CSS

<style>
.hidden_input{
display: none;
}
</style>
<form>
<select name="example">
<option value="1">1 Guests</option>
<option value="2">2 Guests</option>
<option value="3">3 Guests</option>
<option value="4">4 Guests</option>
<option value="5">5 Guests</option>
<option value="6">6 Guests</option>
</select>
</form>
<div id="1" class="hidden_input">1<input name="former" type="text"></div>
<div id="2" class="hidden_input">2<input name="former" type="text"></div>
<div id="3" class="hidden_input">3<input name="former" type="text"></div>
<div id="4" class="hidden_input">4<input name="former" type="text"></div>
<div id="5" class="hidden_input">5<input name="former" type="text"></div>
<div id="6" class="hidden_input">6<input name="former" type="text"></div>

Posted on February 05, 2012