New features in CreateJS
If you have not already seen this video by Grant Skinner it is work taking the time to see what is coming in the next releases of CreateJS
I will just recap on the things that I am most excited about.
I will just recap on the things that I am most excited about.
- CreateJS functionality is not part of Adobe Flash CC and no longer a external extension that needs to be installed to Flash as a toolkit.
- SpriteSheetBuilder - Generates the sprite sheet from vector graphics. Results in smaller file sizes and is scalable for different devices.
- DOMElement - takes a DOM element and includes it in the display list. It then gets manipulated like every other display element. Best parts of HTML and best part of fast graphics.
- Event Model - Includes binding and cleaning up events, it also handles arbitrary data. Unsubscribing from the event has also been added. Dispatching events by name.
- Preloads anything - Load external manifests and PreloadJS works with SoundJS
var queue = new createjs.LoadQueue();
queue.loadManifest([
{src:path1, id:'id1'},
{src:path2, id:'id2'},
], true, '.../filepath/'); // I like this!
CreateJS is licensed under the MIT licence model
Plant box or Table?
I reused some old pallet wood that I had lying around for that long overdue project that I had planned. It started out as a plant box but while I was laying the wooden slats on top to get the correct spacing I thought it actually makes for an interesting looking outside table.
CreateJS, Illustrator and Drawscript
There are various ways of creating and using vector graphics on the web. SVG is a popular choice as is using the canvas in HTML 5. Your background and your project objectives will help you decide which is your best choice.
I am already using the CreateJS library so finding some way of exporting shapes from Adobe Illustrator to code was first prize. Drawscript is a plugin for Illustrator that converts illustrator shapes into code. It can currently only be installed on versions of illustrator between 16.0 and 17.9. Illustrator CC 2014 is version 18.0 so you will need to download a previous version of Illustrator.
Drawscript also does not support complex shapes at this point so nothing with cutouts or negative space. I am sure that support for complex shapes will be coming in future releases which will make this a awesome tool.
Recap on Cons of Drawscript:
I am already using the CreateJS library so finding some way of exporting shapes from Adobe Illustrator to code was first prize. Drawscript is a plugin for Illustrator that converts illustrator shapes into code. It can currently only be installed on versions of illustrator between 16.0 and 17.9. Illustrator CC 2014 is version 18.0 so you will need to download a previous version of Illustrator.
Drawscript also does not support complex shapes at this point so nothing with cutouts or negative space. I am sure that support for complex shapes will be coming in future releases which will make this a awesome tool.
Recap on Cons of Drawscript:
- Only available for versions of illustrator between 16.0 and 17.9
- Support does not yet exist for complex shapes.
Classic, It's Pacman!
I came across this article written by GameInternals and it was super interesting. It is about the classic arcade game Pacman and specifically about the movement of the ghosts. I will keep my descriptions brief because everything is well explained in the original article.
Lets start with the names of the ghosts there is the red ghost Blinky. Blinky's character is refered to as "pursuer" or "chaser" and he almost always follows directly behind Pacman.
Pinky's personality is described as "speedy". Unlike Blinky that follows behind Pacman, Pinky tries to head where Pacman is going.
Inky is the blue ghost and
The orange ghost is Clyde and he appears to do his own thing in the game. Clyde has two modes that he swaps between in his pursuit of pacman.
The ghosts also leave the ghost house in a specific order. Blinky starts outside the house followed by Pinky, Inky and then Clyde.
The ghosts have three modes chase, scatter or frightened. The normal mode is chase where the ghosts pursue Pacman for most of the game. During scatter mode the ghosts move to separate corners of the maze. Frightened mode causes the ghost to turn blue and they pseudorandomly choose a path at every intersection. Ghosts can also be caught in this state and have to return to the ghost house.
Movement decisions are only necessary when the player is over intersection tiles which are featured clearly in the original article. Hopefully I have given you a high level overview and enough reason to read the link above.
Lets start with the names of the ghosts there is the red ghost Blinky. Blinky's character is refered to as "pursuer" or "chaser" and he almost always follows directly behind Pacman.
Pinky's personality is described as "speedy". Unlike Blinky that follows behind Pacman, Pinky tries to head where Pacman is going.
Inky is the blue ghost and
The orange ghost is Clyde and he appears to do his own thing in the game. Clyde has two modes that he swaps between in his pursuit of pacman.
The ghosts also leave the ghost house in a specific order. Blinky starts outside the house followed by Pinky, Inky and then Clyde.
The ghosts have three modes chase, scatter or frightened. The normal mode is chase where the ghosts pursue Pacman for most of the game. During scatter mode the ghosts move to separate corners of the maze. Frightened mode causes the ghost to turn blue and they pseudorandomly choose a path at every intersection. Ghosts can also be caught in this state and have to return to the ghost house.
Movement decisions are only necessary when the player is over intersection tiles which are featured clearly in the original article. Hopefully I have given you a high level overview and enough reason to read the link above.
Weggie anyone?
My Pi Wedge arrived and I was surprised to see it was in pieces and some soldering was required before it would be any use. I am a complete first timer for electrical soldering but I had a soldering iron and some solder lying around.
So what did I learn? Not all soldering irons are created equal and the one had was less equal than most. The large tip and long handle made working clumsy and not being able to regulate the temperature made me slightly nervous of frying the circuit board. Which type of soldering wire to use? The youtube tutorial that I watched mentioned Rosin core for electrical applications and acid core for plumbing applications.
I could only find resin core and acid core so I went with the resin core and crossed my fingers that it was the right option. My solder work is a bit of an ugly duckling but I tested a few of the pins and to my relief they are working.
Following the Sparkfun Hookup guide will get you started and the Raspberry gPio tutorial will get you the rest of the way.
Now what am I going to build?
So what did I learn? Not all soldering irons are created equal and the one had was less equal than most. The large tip and long handle made working clumsy and not being able to regulate the temperature made me slightly nervous of frying the circuit board. Which type of soldering wire to use? The youtube tutorial that I watched mentioned Rosin core for electrical applications and acid core for plumbing applications.
I could only find resin core and acid core so I went with the resin core and crossed my fingers that it was the right option. My solder work is a bit of an ugly duckling but I tested a few of the pins and to my relief they are working.
Following the Sparkfun Hookup guide will get you started and the Raspberry gPio tutorial will get you the rest of the way.
Now what am I going to build?
Tiled Map Editor
Started using the Tiled Map Editor map editor. you can create all kinds of maps from top down games to side runners. Its pretty easy to get up and running and it is compatible for a large number of game engines out there. I am not going to list them all but the one I have started using Tiled with is Phaser and if you haven't read my post on you can read it here.
first things first and when you have to set up your first project in Tiled there are a couple of settings that cannot be altered once the project is started. The most important is the tile size, know how big they need to be. Changing your mind will mean starting over and depending on how far along you are will cost you some time which is not great if you are working towards a deadline.
I chose to make my tiles 32x32 pixels and my map width 800x640 pixels. Why? Well I wanted my map to be equally divisable by my tiles dimensions. That gives me 26 columns by 20 rows, perfect for starting out. I followed the tutorial on gamedevelopment.tutsplus.com and it does a great job of explaining how to create your first map using Tiled.
Something I did find was that you can't make a half tile, what's a half tile? The whole tile is either an obstacle or its not, so in my case I was making the walls of my game and wanted to round the corners my player could not move past the half tiles. Grouping tiles onto layers will save you a headache so all the black tiles you see are on my background layer and the grey tiles are on my wall layer.
Ok so I made up a half tile but you get what I mean, right? A tile is either there or it isn't. The rabbit is only for illustration purposes but If you like him you can grab him here! He was not stretched, squashed or harmed in any way during this blog post.
first things first and when you have to set up your first project in Tiled there are a couple of settings that cannot be altered once the project is started. The most important is the tile size, know how big they need to be. Changing your mind will mean starting over and depending on how far along you are will cost you some time which is not great if you are working towards a deadline.
I chose to make my tiles 32x32 pixels and my map width 800x640 pixels. Why? Well I wanted my map to be equally divisable by my tiles dimensions. That gives me 26 columns by 20 rows, perfect for starting out. I followed the tutorial on gamedevelopment.tutsplus.com and it does a great job of explaining how to create your first map using Tiled.
Something I did find was that you can't make a half tile, what's a half tile? The whole tile is either an obstacle or its not, so in my case I was making the walls of my game and wanted to round the corners my player could not move past the half tiles. Grouping tiles onto layers will save you a headache so all the black tiles you see are on my background layer and the grey tiles are on my wall layer.
Ok so I made up a half tile but you get what I mean, right? A tile is either there or it isn't. The rabbit is only for illustration purposes but If you like him you can grab him here! He was not stretched, squashed or harmed in any way during this blog post.
ZenvaAcademy + Phaser Game Framework
I recently discovered Phaser a gaming framework for javascript and HTML5. It looks great and I immediately looked for info online. I have never done a course on ZenvaAcademy and thought I would give it a try. The first thing to note is that this is not a FREE course but they accepted Paypal transactions. It will set you back a few $$$'s.
You should be fairly confident with your javascript ability and I was very happy to see that they implement some very nice OOP principles. Assuming you meet the above criterea this is a nice framework that handles game states, game physics and garbage collection very nicely.
Through the course you build a runner style game and each new chapter builds very nicely on top of the last. I found that the progression starts off fairly easy but by the end there is a fair amount of complexity added to the game.
SO would I recommend that you part with your hard earned $$$'s and take this course, absolutely! Happy coding and checkout the finished game!
Subscribe to:
Posts
(
Atom
)
