As I've been doing a lot more Phaser game dev lately, I thought it might be fun to blog about my progress. If you are familiar with my work, or this blog, then you'll know that I'm still a bit of a novice. Therefore the fun of these "Dev Blog" posts, for me anyway, is tracing how much I learn.
"Pandemonium" is the internal working name (i.e. non-permanent) for a game that I'm developing in partnership with Thomas "Bahototh" Finholm, a talented and very creative 2D artist.
"Pandemonium" is the internal working name (i.e. non-permanent) for a game that I'm developing in partnership with Thomas "Bahototh" Finholm, a talented and very creative 2D artist.
The Premise
The premise of our game is that the player steps into the shoes of one of the few survivors of a vast, intergalactic civil war. Most of humanity has been killed off by an organism that was artificially engineered and weaponized. This organism has properties of both Animalia and Fungi, and asexually spawns alien-like creatures with varied levels of intelligence.
The daunting task thrust upon the player is to travel the galaxy and liberate various planets by attacking, and defeating the "Artificial Organism's" primary stronghold on each planet.
The game will essentially be a sci-fi Zelda-like, with plenty of survival and action elements, and (my personal favorite) exploration.
The daunting task thrust upon the player is to travel the galaxy and liberate various planets by attacking, and defeating the "Artificial Organism's" primary stronghold on each planet.
The game will essentially be a sci-fi Zelda-like, with plenty of survival and action elements, and (my personal favorite) exploration.
Challenges
I love challenges and learning, and it is one of my personal goals, on every game that I work on, to implement some functionality that I've never done before. Here's a few that, so far, I'm implementing in "Pandemonium":
Mini-Map
As far as I know (and I've looked pretty hard), Phaser doesn't have any built-in functionality to facilitate a mini-map. Therefore, I've manually coded one. Right now it's in a very rough state - and will need to be cleaned up and refactored - but it's working. My process is basically this:
Creating the Map Image
(1) I create the actual map in Tiled and export for use in the code
(2) In Tiled, I turn off the Grid feature and zoom out until I can see the map in its entirety
(3) I take a screen shot of the map, and load it into Paint.NET
(4) I cut away everything in the image, except for the walls
(5) I paint the walls white and everything else black
(6) I resize the map
Mini-Map
As far as I know (and I've looked pretty hard), Phaser doesn't have any built-in functionality to facilitate a mini-map. Therefore, I've manually coded one. Right now it's in a very rough state - and will need to be cleaned up and refactored - but it's working. My process is basically this:
Creating the Map Image
(1) I create the actual map in Tiled and export for use in the code
(2) In Tiled, I turn off the Grid feature and zoom out until I can see the map in its entirety
(3) I take a screen shot of the map, and load it into Paint.NET
(4) I cut away everything in the image, except for the walls
(5) I paint the walls white and everything else black
(6) I resize the map
Implementing on the Game Screen with a Marker for the Player
(1) Once I have the map simplified and resized, I simply add it to the screen the way you would any sprite, and I set the opacity (via the 'alpha' property) to 75%.
(2) I also fix the mini-map to the camera and give it an appropriate offset.
(3) By this time I've also created a marker sprite for to represent the player.
(4) I add the marker to the screen, manually setting it's coordinates so as to appear on the mini-map in a position to correspond with the player's position on the actual map (I told you it was messy)
(5) Now, BEFORE the player moves in the Update function, I have a few lines of code that determine whether or not the player is moving in a given direction. If the player is moving then I change the offset of the marker to correlate.
Here's my actual code:
(1) Once I have the map simplified and resized, I simply add it to the screen the way you would any sprite, and I set the opacity (via the 'alpha' property) to 75%.
(2) I also fix the mini-map to the camera and give it an appropriate offset.
(3) By this time I've also created a marker sprite for to represent the player.
(4) I add the marker to the screen, manually setting it's coordinates so as to appear on the mini-map in a position to correspond with the player's position on the actual map (I told you it was messy)
(5) Now, BEFORE the player moves in the Update function, I have a few lines of code that determine whether or not the player is moving in a given direction. If the player is moving then I change the offset of the marker to correlate.
Here's my actual code:
The tricky part is getting the "this.dot_offset" value set in such a way that the dot moves on the mini-map at the same relative rate as the player moves on the actual map. I had to do quite a bit of experimenting to get this right. Right now, I have the "this.dot_offset" variable set to 0.1175, and even that is not quite precise enough! I'm sure that there is a formula I can work out based on the size of the map, and the speed of the player, but I haven't quite gotten there yet.
My goal, code wise, is to have each map exist as a class that contains the map image, the initial placement of the player marker, and the unique dot_offset. That way, with each level, I can create an instance of that map, and the rest of the work is done "behind the scenes".
Growing Fungi-like Organisms
One of the cool things about the game so far - if I say so myself - is the fungi-like organism that grows and spreads as time passes. The challenge is facilitating the growth without killing FPS (frames-per-second)!
I have some very rough code set up at present that does the job. This is basically how the code works:
(1) I created a class to represent each seed (a "seed" represents a starting point for later growth), and gave it a "grow" method.
(2) The "grow" method gets random x and y dirs (either -32, 0, or 32 (the seed sprites are 32x32 px) relative to the placement of the seed), and creates a new seed at those coordinates.
(3) I also have a variable that limits how many times an individual seed can spread (otherwise I can kiss FPS good-bye).
(4) In the actual game code, I create a FOR statement that iterates based on how many "seeds" I want to initialize with.
(5) For each seed, I assign random x and y coordinates, and plant it
(6) I have a timer that goes off every ten seconds. When it goes off, each seed grows by one seed. That new seed will also grow, the next time the counter hits, creating another seed.
My goal, code wise, is to have each map exist as a class that contains the map image, the initial placement of the player marker, and the unique dot_offset. That way, with each level, I can create an instance of that map, and the rest of the work is done "behind the scenes".
Growing Fungi-like Organisms
One of the cool things about the game so far - if I say so myself - is the fungi-like organism that grows and spreads as time passes. The challenge is facilitating the growth without killing FPS (frames-per-second)!
I have some very rough code set up at present that does the job. This is basically how the code works:
(1) I created a class to represent each seed (a "seed" represents a starting point for later growth), and gave it a "grow" method.
(2) The "grow" method gets random x and y dirs (either -32, 0, or 32 (the seed sprites are 32x32 px) relative to the placement of the seed), and creates a new seed at those coordinates.
(3) I also have a variable that limits how many times an individual seed can spread (otherwise I can kiss FPS good-bye).
(4) In the actual game code, I create a FOR statement that iterates based on how many "seeds" I want to initialize with.
(5) For each seed, I assign random x and y coordinates, and plant it
(6) I have a timer that goes off every ten seconds. When it goes off, each seed grows by one seed. That new seed will also grow, the next time the counter hits, creating another seed.
At this point, you can probably see why - after just a few iterations - it takes such a heavy toll on FPS. So I did some research and found this post at CodingCookies that addresses almost the exact. same. idea. Which is awesome! So my next step is to peruse his code and see how he managed the processing load.
Conclusion
There are always other challenges that go along with creating a game like this, and since it is so early in development, there are also a lot of ideas that we're still developing and refining. I have a deep love and appreciation for exploration games and so I'm very excited to implement the creativity and environmental diversity that comes along with that type of game-play!
Be sure to check back often for additional development updates!
Be sure to check back often for additional development updates!