Hello everyone!
I have just started using PlayCanvas and this will be a log of me working to create a Doodle Jump type game.
##[Play later version here] (http://apps.playcanvas.com/adamraz/DoodleJumpClone/DoodleV3)
#Play latest version here
If there are any requests for explanations etc. I will be happy to answer where I can.
The final code scripts are here if you want to see how it all works. Be warned I left in a lot of the unused code as comments, so it is very messy and generally quite basic - a lot of people with more experience than me might scream when they see it, and looking at the PlayCanvas projects scripts from the play page will most likely be more useful…but hey it’s my first proper game!
Also note I forked this originally from the Walkthrough - Animated Character tutorial pack, so if you see anything like “Create a dancing robot in this walkthrough.” as a description, that’s why…
I just thought I’d give a warning about the current state of the scripts: they’re awful. They’re better than before! Right now I’ve been adding Facebook and Parse integration for score tracking and leader-boards etc. The code is super hard to read, so I am pre-emptively sorry to all who attempt to read it.
1 Like
First update:
So, after a few days i have a basic working game with the following:
- Player Controls
- Vertically moving camera, tracking the player
- Platforms that generate around the player as they move upwards
- A reset function for when the player falls below the screen
- The player jumps through the platforms from beneath, but once on the platform, they are solid and the player can jump from them.
- Audio: jump sounds and looping background music
- Basic score tracker - although it doesn’t show on-screen a the moment!
The basic process was to use the scripts from the PlayCanvas tutorials here, copy them over to my scripts, then adapt them to my need and add what I needed.
You can take a look at my scripts in their current state here. But note I am not using all of these in the actual game, so far only: Player.js and level_create.js.
The attributions.js script I have used to just place some credits for where I got my sound files/ music from.
Some screenshots:
Just some more info:
Ok, so now I’ve added some more stuff:
- Title Screen and Game-Over screen : both of these were made in GIMP, exported as .png and added to the game by following these instructions - note they are two separate entities each with a copy of sprite.js attached in each of their script components.
And I edited some of the behaviour behind the scenes:
The player no long just hangs in the air after the platform beneath disappears - this would happen if you just stood still, but you would fall as soon as yo tried to move and was apparently from the rigidbody physics of the player being put to sleep so I just added a:
this.entity.rigidbody.activate();
to the beginning of the update function within my player’s attached script. This forces the physics simulation to always include the player.
I also added a sprite to indicate the score - no active element yet, it’s just a background image, the updating score itself is coming up next.
Some more screenshots:
Ok so now I have added a working score counter - it basically tracks the max height you reach, rounds down and takes that as your score.
This was added following these instructions on creating fonts.
I actually got stuck from doing something silly and downloading the .py file right from the link above, when really that just downloads an HTML file (d’oh!) you have to get it from here: https://raw.githubusercontent.com/playcanvas/fonts/master/fnt_to_json.py
Also, for those not familiar with the command line like me:
You need to install Python and also add C:\Python27\ (or wherever you installed it) to an environment variables settings in Windows, similar to the descriptions here.
Just add ;C:\Python27\ to end of the list for the ‘path’ variable section that’s already there.
Then run the program from windows command line, not python command line by typing “python”, space, followed by the location of the fnt_to_json.py file, space, then the location of the .fnt file, a space, and then the output location for where the.json file should be saved (anywhere).
So something like, after the initial C:\Users’YourName’>
type: python C:\fnt_to_json.py C:‘FontName’.fnt C:\Users’YourName’‘FontName’.json
I also changed the player’s behaviour to actually make it like Doodle Jump: you no longer press up to jump, it automatically happens when you hit a platform.
There are a few weird behaviours I need to sort out, like the constant jumping when the title screen is shown. I haven’t linked the latest file yet, so the link in the first post is out of date
More updates!
I added a Robo model for the player & some fancier platforms - all
assets from platform starter kit.
I changed the game’s name to RoboJump, I was thinking of Strudel Jump too (or anything else that rhymed with Doodle), but I didn’t really want to model a strudel.
Sorted a blue background that scrolls upwards with the orthographic camera so the view always shows the background.
I also changed platform generation code massively. It’s more ordered this time and makes sure no platforms are overlapping – previous game versions had a big problem where if two platforms overlapped and you landed on them you where counted as having collided twice and so when you jumped you were boosted up by multiple applications of the applyImpulse command - sometimes through the top of the screen.
The platforms also become less common and more spaced apart as you travel upwards for gradually increasing difficulty.
Some pics:
Nearly Done!
I added some new title and game-over screen images with the new Robo character and added keyboard control to move past both screens. I changed the way the camera scrolls upwards, changed the canvas resolution to 1024x1024.
I added a horizontal position check to platform collisions to make sure the player was not able to jump from the side of a platform.
I changed the background, tweaked the jumping mechanics, and now its mostly a complete product.
Also added a half decent project / game image.
Not epic in any way, but at least it works for what it is!
Some Pics:
Ok just some small updates, now the player teleports to the other side of the screen when your reach the screen edge - instead of just falling to its doom.
Also - better fonts! - play it with the link above
2 Weeks since the last post, I’ve been trying to add score tracking via Facebook and Parse. The game can show a global high score table and a friends high score table that shows the scores of any Facebook friends you have that have also played RoboJump (and given basic permission to RoboJump). This stuff seems unreliable though, every so often I get some ‘property of x is undefined kind of error’ so I need to sort that out.
I can’t remember what else I’ve added though … I’ve been improving the controls and… whatever here are some more Robo pics:
I know that isn’t a proper Facebook button… 
Soooo I finally cleared up some of my messed up code!!, removed commented out code and tried to make it at least readable.
Tweaked controls, again - I wish there was some magic formula for good controls…maybe I’m missing something obvious…
Added a limiter for vertical speed, I sometimes still get a random physics collision situation that forces the player’s rigidbody out of a platform block and throws the little robo man into space (well not quite, but throws him about twice the speed he’s meant to go), i kinda got annoyed with it and just forced a cap on vertical speed (deceleration is applied beyond that point, dynamic bodies need force control methinks), lame and hacky I know…fix it later because procrastination is the best!
Also if, on the off chance any fellow PlayCanvas noobs are reading this… at his point I’m thinking learning from RoboJump might not be the best option…most probably Use the tutorials section, the PlayCanvas code sources here, and the code from featured games page - The ‘play page’. Just click on ‘View project’ and take a look at the scripts and how the entities are organised etc.
I still need to remove all the unused entities and code left over from my experimenting with tutorials etc…
