{"id":3140,"date":"2014-05-28T01:47:54","date_gmt":"2014-05-28T08:47:54","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=3140"},"modified":"2014-05-28T01:47:54","modified_gmt":"2014-05-28T08:47:54","slug":"html5-game-tutorial-making-a-platformer-part-1","status":"publish","type":"post","link":"https:\/\/www.nathalielawhead.com\/candybox\/html5-game-tutorial-making-a-platformer-part-1","title":{"rendered":"HTML5 Game Tutorial: Making A Platformer (PART 1)"},"content":{"rendered":"

DOWNLOAD SOURCE HERE<\/a><\/p>\n

I’ve been developing a totally new game for Tetrageddon<\/a>. It’s going to be available for mobile (iOS, and Android), as well as the desktop. <\/p>\n

This is an HTML5 game (for a change), with CreateJS, using FlashCC’s HTML5 Canvas document. Doing so will make things easier for me animation wise, as well as managing complex animated “cut scenes”, and other graphical aspects…<\/p>\n

The game is codenamed “Face The Music” because it will essentially be about death and “giving up” — in a playful yet poetic pixel art style. :)
\nBest of all, “Face The Music” is a platformer game!<\/p>\n

\"\"<\/p>\n

I will be documenting the development process, and releasing it as a series of tutorials that will walk you through creating this game. I will be doing this for all of Tetrageddon’s projects from now on, because I want to place even more emphasis on the “learning resource” aspect of Tetrageddon Games<\/a>. This will provide excellent content for that.<\/p>\n

Let’s begin!<\/p>\n

*************<\/p>\n

The Basic Platformer<\/strong><\/p>\n

DOWNLOAD SOURCE HERE<\/a><\/p>\n

The finished product will behave like this. Sorry, it’s in the “programmer art” stage. :)<\/p>\n

[iframe src=”http:\/\/nathalielawhead.com\/sourcefiles\/Tutorial_HTML5_Platformer_Part1\/FaceTheMusic_Tutorial1.html” width=”800″ height=”480″]
\nhttp:\/\/nathalielawhead.com\/sourcefiles\/Tutorial_HTML5_Platformer_Part1\/FaceTheMusic_Tutorial1.html<\/a><\/p>\n

LEFT\/RIGHT = Move
\nDOWN = Duck
\nUP = Jump (hold up to jump higher)
\nFalling off = Death
\nGetting to right of screen = Win (it’s a short game at the moment)<\/p>\n

*************<\/p>\n

The Setup<\/strong><\/p>\n

For starters head down to https:\/\/github.com\/madrobby\/keymaster<\/a> and grab a copy of keymaster.js<\/code>. I’m using this because I figure I’ll want more complex keyboard functionality (maybe I’ll change this later, but for now I’m using this).<\/p>\n

The code to import this will be as follows (first thing, first frame):<\/p>\n

<\/p>\n

\n
\/\/import .js<\/span>\r\nvar<\/span> js_keys =<\/span> document<\/span>.createElement("script"<\/span>);\r\njs_keys.src =<\/span> "libs\/keymaster.js"<\/span>;\r\njs_keys.type =<\/span> "text\/javascript"<\/span>;\r\ndocument<\/span>.getElementsByTagName("head"<\/span>)[0<\/span>].appendChild(js_keys);\r\n<\/pre>\n<\/div>\n
There are some miscellaneous functions that will handle returning various calculations.
\nnum_randrange<\/code>, which returns a random number between a minimum and maximum specified value…<\/p>\n
<\/p>\n
\n
\/\/Math<\/span>\r\nfunction<\/span> num_randrange(num_max, num_min)\r\n{\r\n     return<\/span> Math<\/span>.ceil(Math<\/span>.random()*<\/span>(num_max-<\/span>num_min)+<\/span>num_min);\r\n}\r\n<\/pre>\n<\/div>\n
and gotoAndStopRandom<\/code>, which sets a sprite to a random frame (I’ll be using this for the player sprite in later versions of the game).<\/p>\n
<\/p>\n
\n
\/\/Timelines<\/span>\r\nfunction<\/span> gotoAndStopRandom(clip){\r\n\tclip.gotoAndStop(Math<\/span>.ceil(Math<\/span>.random()*<\/span>clip.timeline.duration));\r\n};\r\n<\/pre>\n<\/div>\n
Moving on to the actual meat of the game, we’ll set up the “world properties” (like gravity, friction, and stage width\/height, and other necessary Arrays, variables…)<\/p>\n
<\/p>\n
\n
this<\/span>.stop();\r\n\r\n\/\/Stage<\/span>\r\n_stage =<\/span> this<\/span>;\r\nnum_stageWidth =<\/span> 800<\/span>;\r\nnum_stageHeight =<\/span> 480<\/span>;\r\n\r\n\/\/"World" properties<\/span>\r\nfriction =<\/span> 0.6<\/span>;\r\ngravity =<\/span> 0.8<\/span>;\r\n\r\n\/\/Booleans<\/span>\r\nbool_keyDown =<\/span> false<\/span>;\/\/key is held down<\/span>\r\nbool_jumpDown =<\/span> false<\/span>;\/\/jump key is down<\/span>\r\n\r\nbool_lastpanel =<\/span> true<\/span>;\/\/false;\/\/is this the last panel, if so the game will win after you leave the screen<\/span>\r\n\r\n\/\/Sprites<\/span>\r\n\/\/Every sprite set is stored in that set's own array - <\/span>\r\n\/\/for collision and sprite specific properties\/functionality<\/span>\r\n\/\/the player<\/span>\r\nmc_frombie =<\/span> null<\/span>;\r\narr_players =<\/span> [];\/\/array of any hero sprites [0] = mc_frombie<\/span>\r\n\/\/ground<\/span>\r\narr_colidable =<\/span> [];\/\/array of any colidable platform<\/span>\r\n<\/pre>\n<\/div>\n
Most of this is fairly self explanatory.<\/p>\n
bool_lastpanel<\/code> is the current screen you’re on. I’m dividing the game up like it’s comic book panels that you are playing through. This being set to true indicates that once you leave the right of the screen, you “win”.<\/p>\n
The last two arrays: arr_players<\/code> and arr_colidable<\/code>, are sprites that will check against each-others collision… I mean, I put everything in their respective arrays to handle the “object type”, if it’s in arr_colidable<\/code> then it’s a platform and the player (arr_players<\/code>) will stand on it.<\/p>\n
*************<\/p>\n
Managing Sprites<\/strong><\/p>\n
I’m wrapping up managing sprites into a set of functions. The first one (addSprite<\/code>) is going to be responsible for adding sprites. It takes five properties. They are as follows.
\nlibItem<\/code> = name of library item. As you can see, I have any sprites that need to be manipulated through code added on the “first frame”. This way it registers — workaround for not having library linkages.
\nname<\/code> = new name of the added sprite.
\narr<\/code> = the array it should be added to. Such as arr_players<\/code> (for a player), arr_colidable<\/code> (if it’s a collideable platform).
\nx<\/code> = x position.
\ny<\/code> = y position.
\naddSprite<\/code> creates a clip via var clip = new libItem();<\/code>
\nAdds it to _stage<\/code> (our “root timeline” as saved in the variable from the above setup), names it, and adds it to the specified array, then places it at the desired x\/y coordinates.<\/p>\n
<\/p>\n
\n
\/\/create the sprite<\/span>\r\n\/\/usage: addSprite(lib.Player, "mc_frombie", arr_players, 150, 150);<\/span>\r\nfunction<\/span> addSprite(libItem, name, arr, x, y){\r\n\t\/\/<\/span>\r\n\tvar<\/span> clip =<\/span> new<\/span> libItem();\/\/lib.LINKAGE<\/span>\r\n\t_stage.addChild(clip);\r\n\tclip.name =<\/span> name;\r\n\tarr.push(clip);\r\n\t\/\/<\/span>\r\n\tclip.x =<\/span> x;\r\n\tclip.y =<\/span> y;\r\n};\r\n<\/pre>\n<\/div>\n
Then there’s removeAllSprites()<\/code>. This one gets called for game win, or game over (dying). To clear off everything on the stage. It simply loops through all the arrays, and removes their contents from _stage<\/code>.<\/p>\n
<\/p>\n
\n
\/\/remove anything created by game<\/span>\r\n\/\/could use removeAllChildren, but I don't know what I might want to keep...<\/span>\r\nfunction<\/span> removeAllSprites(){\r\n\t\/\/get rid of the player<\/span>\r\n\tfor<\/span>(var<\/span> plr =<\/span> 0<\/span>; plr<<\/span>arr_players.length; ++<\/span>plr){\r\n\t\t_stage.removeChild(arr_players[plr]);\r\n\t};\r\n\t\/\/get rid of anything colidable<\/span>\r\n\tfor<\/span>(var<\/span> col =<\/span> 0<\/span>; col<<\/span>arr_colidable.length; ++<\/span>col){\r\n\t\t_stage.removeChild(arr_colidable[col]);\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
And finally we have a set of functions specific to managing the player’s states; player_die<\/code>, player_win<\/code>, and player_duck<\/code>.
\nplayer_die<\/code> and player_win<\/code> are basically identical, but they set the _stage<\/code> to a different “frame”.
\nplayer_die<\/code> first calls evnt_removeAll()<\/code>, which removes all event listeners (will explain later). Then removeAllSprites<\/code>, then sends _stage<\/code> to “gameover”. player_win<\/code> does the same thing.<\/p>\n
<\/p>\n
\n
\/\/Player<\/span>\r\nfunction<\/span> player_die(){\r\n\t\/\/remove all listeners<\/span>\r\n\tevnt_removeAll();\r\n\t\/\/remove all created children<\/span>\r\n\tremoveAllSprites();\r\n\t\/\/<\/span>\r\n\tconsole.log("gameover"<\/span>);\r\n\t\/\/go to gameover<\/span>\r\n\t_stage.gotoAndStop("gameover"<\/span>);\r\n};\r\n\r\nfunction<\/span> player_win(){\r\n\t\/\/remove all listeners<\/span>\r\n\tevnt_removeAll();\r\n\t\/\/remove all created children<\/span>\r\n\tremoveAllSprites();\r\n\t\/\/<\/span>\r\n\tconsole.log("gamewin"<\/span>);\r\n\t\/\/go to gameover<\/span>\r\n\t_stage.gotoAndStop("win"<\/span>);\r\n};\r\n<\/pre>\n<\/div>\n
player_duck<\/code> handles the player’s “crouched” state. The player ducks when you press the DOWN<\/code> key, or he will be ducked down (in an “ouch my head!” animated state) if a collision takes place where the player hits his head on the bottom of a platform… like, jumps up against something… as a cute detail.
\nTo duck, the players ducking state is set to true<\/code>, and then the player’s height reduced (I will explain player properties later). If a certain type \"duck\"<\/code>, or \"ouch\"<\/code>, then set the player to that state…
\nThe finished function is as follows:<\/p>\n
<\/p>\n
\n
\/\/ducking acts as an "ouch my head", and "be careful my head" animation<\/span>\r\n\/\/like he's sensitive about his head... aside from reducing his height so he can crawl through small areas<\/span>\r\nfunction<\/span> player_duck(type){\r\n\tmc_frombie.ducking =<\/span> true<\/span>;\r\n\tmc_frombie.height =<\/span> 10<\/span>;\r\n\tif<\/span>(type==<\/span>"duck"<\/span>){\r\n\t\tmc_frombie.gotoAndStop("duck"<\/span>);\r\n\t}\r\n\t\/\/hit his head on something, now sees stars or some type of injury<\/span>\r\n\tif<\/span>(type==<\/span>"ouch"<\/span>){\r\n\t\tmc_frombie.gotoAndStop("ouch"<\/span>);\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
Finally, we’ll add the sprites to the stage.
\nThis is a prototype of a game “level”… a very, very, small level. So we’ll create a few platforms (of different types), and the player.
\nStarting with the player.
\nThe player is first added, and the currently controllable player saved to a variable (mc_frombie<\/code>), so that any collision detection, and controlling will only apply to him — in the event that I want to add more controllable characters, I can just pull from the array and re-assign mc_frombie<\/code> to the desired controllable sprite.
\nThen we have the player properties (values), which are set manually.
\nWe set the .width<\/code> and .height<\/code>, this is important for collision detection (which uses width height to check). When the player crouches\/ducks the .height<\/code> is set to the crouch value. These values will change throughout the game, depending on the player’s state.
\nThen there are the last remaining properties that have to do with the physics, and states like jumping, if the player is on the ground, and ducking…
\nmc_frombie.speed<\/code> = the speed of the player.
\nmc_frombie.jumpHeight<\/code> = how high the player’s initial jump is. The player jumps higher if the up key is held down longer. If the up key is tapped then the player jumps at this default value.
\nmc_frombie.velX<\/code> = the x velocity.
\nmc_frombie.velY<\/code> = the y velocity.
\nmc_frombie.jumping<\/code> = is the player jumping?
\nmc_frombie.grounded<\/code> = is the player on the ground (on a platform)?
\nmc_frombie.ducking<\/code> = is the player ducking (crouching)?<\/p>\n
In conclusion, player setup looks like this:<\/p>\n
<\/p>\n
\n
\/\/PLAYER<\/span>\r\naddSprite(lib.Player, "mc_frombie"<\/span>, arr_players, 150<\/span>, 150<\/span>);\r\nmc_frombie =<\/span> arr_players[0<\/span>];\r\n\/\/player properties<\/span>\r\n\/\/width and height is set manually<\/span>\r\n\/\/this is the standing position<\/span>\r\n\/\/crouching is adjusted in the down arrow event (reduce height, and go to another frame)<\/span>\r\n\/\/this way I don't need fancy collision detection because I always know the w\/h values...<\/span>\r\nmc_frombie.width =<\/span> 40<\/span>;\/\/66<\/span>\r\nmc_frombie.height =<\/span> 110<\/span>;\r\n\/\/<\/span>\r\nmc_frombie.speed =<\/span> 6<\/span>;\/\/9;<\/span>\r\nmc_frombie.jumpHeight =<\/span> 1.5<\/span>;\/\/2<\/span>\r\nmc_frombie.velX =<\/span> 0<\/span>;\r\nmc_frombie.velY =<\/span> 0<\/span>;\r\nmc_frombie.jumping =<\/span> false<\/span>;\r\nmc_frombie.grounded =<\/span> false<\/span>;\r\nmc_frombie.ducking =<\/span> false<\/span>;\r\n\/\/<\/span>\r\nmc_frombie.stop();\r\ngotoAndStopRandom(mc_frombie.mc_frombie);\r\n<\/pre>\n<\/div>\n
Now we set up our platforms\/floors. There are two types of floors. One is the classic version where if you hit the sides, and bottom, it will register as a collision and the player may not move there. The second is the one where you can jump through it, and land on it… Hope that makes sense. Envision the first being a box, and the second is like a cloud…
\nEach platform is added to arr_colidable<\/code>, and variable assigned to it.
\nEach platform needs to have its own width\/height<\/code> set, and then its isPlatform<\/code> boolean set. False<\/code> means you can’t jump through it (collision registers on all sides), true<\/code> means you can jump through it and land on it (collision only registers for top).
\nWe have four platforms to start with.
\nThe end result looks like this:<\/p>\n
<\/p>\n
\n
\/\/GROUND<\/span>\r\naddSprite(lib.Colidable_Floor, "mc_floor1"<\/span>, arr_colidable, 50<\/span>, 300<\/span>);\r\nmc_floor1 =<\/span> arr_colidable[0<\/span>];\r\n\/\/properties<\/span>\r\nmc_floor1.width =<\/span> 800<\/span>;\r\nmc_floor1.height =<\/span> 50<\/span>;\r\nmc_floor1.isPlatform =<\/span> false<\/span>;\r\n\r\n\/\/GROUND 2<\/span>\r\naddSprite(lib.Colidable_Floor, "mc_floor2"<\/span>, arr_colidable, 1000<\/span>, 130<\/span>);\r\nmc_floor2 =<\/span> arr_colidable[1<\/span>];\r\n\/\/properties<\/span>\r\nmc_floor2.width =<\/span> 800<\/span>;\r\nmc_floor2.height =<\/span> 50<\/span>;\r\nmc_floor2.isPlatform =<\/span> false<\/span>;\r\n\r\n\/\/GROUND 3<\/span>\r\naddSprite(lib.Colidable_Platform, "mc_floor3"<\/span>, arr_colidable, 300<\/span>, 50<\/span>);\r\nmc_floor3 =<\/span> arr_colidable[2<\/span>];\r\n\/\/properties<\/span>\r\nmc_floor3.width =<\/span> 100<\/span>;\r\nmc_floor3.height =<\/span> 50<\/span>;\r\nmc_floor3.isPlatform =<\/span> false<\/span>;\r\n\r\n\/\/Platform, you can walk through it, and jump up through it, but you can stand on it<\/span>\r\naddSprite(lib.Colidable_Platform, "mc_platform1"<\/span>, arr_colidable, 500<\/span>, 200<\/span>);\r\nmc_platform1 =<\/span> arr_colidable[3<\/span>];\r\n\/\/properties<\/span>\r\nmc_platform1.width =<\/span> 100<\/span>;\r\nmc_platform1.height =<\/span> 50<\/span>;\r\nmc_platform1.isPlatform =<\/span> true<\/span>;\/\/if it is a platform you can stand on it, but hitting the bottom and sides does nothing<\/span>\r\n<\/pre>\n<\/div>\n
*************<\/p>\n
Collision Detection!<\/strong><\/p>\n
I wanted the simplest, most basic, and corner cutting approach possible, because I want to move on to making the game. I never really thought about the finer aspects of collision detection before, since there are so many libraries available. You can just use what’s already provided. It was interesting to wrap my head around it.
\nI found Somethinghitme’s explanation of collision detection<\/a> to be an excellent example for getting my head thinking in those terms. I recommend checking it out, it’s basically what I’m doing here…<\/p>\n
To begin we will calculate the amount of overlap between the two objects (object1 and object2), on both sides, top and bottom:
\n<\/p>\n
\n
leftDist    =<\/span> (object2.x -<\/span> object2.width\/<\/span>2<\/span>) -<\/span> (object1.x +<\/span> object1.width\/<\/span>2<\/span>);\r\nrightDist   =<\/span> (object1.x -<\/span> object1.width\/<\/span>2<\/span>) -<\/span> (object2.x +<\/span> object2.width\/<\/span>2<\/span>);\r\ntopDist     =<\/span> (object2.y -<\/span> object2.height\/<\/span>2<\/span>) -<\/span> (object1.y +<\/span> object1.height\/<\/span>2<\/span>);\r\nbottomDist  =<\/span> (object1.y -<\/span> object1.height\/<\/span>2<\/span>) -<\/span> (object2.y +<\/span> object2.height\/<\/span>2<\/span>);\r\n<\/pre>\n<\/div>\n
And then the half width and height of both objects. This will be used later for determining which side the collision occurred on.
\n<\/p>\n
\n
var<\/span> hWidths =<\/span> (object1.width \/<\/span> 2<\/span>) +<\/span> (object2.width \/<\/span> 2<\/span>);\r\nvar<\/span> hHeights =<\/span> (object1.height \/<\/span> 2<\/span>) +<\/span> (object2.height \/<\/span> 2<\/span>);\r\n<\/pre>\n<\/div>\n
Then we’ll move on to our if<\/code> block. First to just get a collision (regardless of what side):
\n<\/p>\n
\n
if<\/span>(leftDist <<\/span> 0<\/span> &&<\/span> rightDist <<\/span> 0<\/span> &&<\/span> topDist <<\/span> 0<\/span> &&<\/span> bottomDist <<\/span> 0<\/span>){\r\n<\/pre>\n<\/div>\n
In this block we’ll fine tune our check, and return what side the collision took place on.
\nFirst we’ll set up the string direction_string<\/code>. This will return \"left\"<\/code>, \"right\"<\/code>, \"top\"<\/code>, or \"bottom\"<\/code>.<\/p>\n
Then we have our distance variables (as the comment suggests) between the two objects:
\n<\/p>\n
\n
var<\/span> xDist =<\/span> object1.x -<\/span> object2.x;\r\nvar<\/span> yDist =<\/span> object1.y -<\/span> object2.y;\r\n<\/pre>\n<\/div>\n
The last set of variables is where the magic happens! This oX<\/code> and oY<\/code> determine what side the collision occurred on. Simply put:
\n<\/p>\n
\n
var<\/span> oX =<\/span> hWidths -<\/span> Math<\/span>.abs(xDist);\r\nvar<\/span> oY =<\/span> hHeights -<\/span> Math<\/span>.abs(yDist);\r\n<\/pre>\n<\/div>\n
Moving on to our final set of if<\/code>‘s… These check on what side\/top\/bottom the collision took place, and set direction_string<\/code> to that side. Then object1<\/code>‘s (the player) .y<\/code> or .x<\/code> is set to oY<\/code> or oX<\/code> (landed on it, or can’t go beyond it)… just force it to that value.
\nAll that looks like this:
\n<\/p>\n
\n
if<\/span> (oX >=<\/span> oY) {\r\n\tif<\/span> (yDist ><\/span> 0<\/span> &&<\/span> !<\/span>object2.isPlatform) {\/\/hit the top<\/span>\r\n\t\tdirection_string =<\/span> "top"<\/span>;\r\n\t\tobject1.y +=<\/span> oY;\r\n\t}\r\n\tif<\/span> (yDist <<\/span> 0<\/span>){\/\/standing on it<\/span>\r\n\t\tdirection_string =<\/span> "bottom"<\/span>;\r\n\t\tobject1.y -=<\/span> oY;\r\n\t}\r\n} else<\/span> {\r\n\tif<\/span> (xDist ><\/span> 0<\/span> &&<\/span> !<\/span>object2.isPlatform) {\/\/left of<\/span>\r\n\t\tdirection_string =<\/span> "left"<\/span>;\r\n\t\tobject1.x +=<\/span> oX;\r\n\t} \r\n\tif<\/span> (xDist <<\/span> 0<\/span> &&<\/span> !<\/span>object2.isPlatform) {\/\/right of<\/span>\r\n\t\tdirection_string =<\/span> "right"<\/span>;\r\n\t\tobject1.x -=<\/span> oX;\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
Finally return the value of direction_string<\/code>. We worked hard to get this!
\n<\/p>\n
\n
return<\/span> direction_string;\r\n<\/pre>\n<\/div>\n
The entire colisionCheck<\/code> is as follows:<\/p>\n
<\/p>\n
\n
\/\/colision detection for player and platform (ground)<\/span>\r\nfunction<\/span> colisionCheck(object1, object2) {\r\n\t\/\/amount of overlap<\/span>\r\n\tleftDist    =<\/span> (object2.x -<\/span> object2.width\/<\/span>2<\/span>) -<\/span> (object1.x +<\/span> object1.width\/<\/span>2<\/span>);\r\n\trightDist   =<\/span> (object1.x -<\/span> object1.width\/<\/span>2<\/span>) -<\/span> (object2.x +<\/span> object2.width\/<\/span>2<\/span>);\r\n\ttopDist     =<\/span> (object2.y -<\/span> object2.height\/<\/span>2<\/span>) -<\/span> (object1.y +<\/span> object1.height\/<\/span>2<\/span>);\r\n\tbottomDist  =<\/span> (object1.y -<\/span> object1.height\/<\/span>2<\/span>) -<\/span> (object2.y +<\/span> object2.height\/<\/span>2<\/span>);\r\n    \/\/half widths and half heights of the objects<\/span>\r\n    var<\/span> hWidths =<\/span> (object1.width \/<\/span> 2<\/span>) +<\/span> (object2.width \/<\/span> 2<\/span>);\r\n    var<\/span> hHeights =<\/span> (object1.height \/<\/span> 2<\/span>) +<\/span> (object2.height \/<\/span> 2<\/span>);\r\n\t\/\/<\/span>\r\n\tif<\/span>(leftDist <<\/span> 0<\/span> &&<\/span> rightDist <<\/span> 0<\/span> &&<\/span> topDist <<\/span> 0<\/span> &&<\/span> bottomDist <<\/span> 0<\/span>){\r\n\t\t\/\/left, right, top, bottom<\/span>\r\n\t\tvar<\/span> direction_string;\r\n\t\t\/\/distance variables<\/span>\r\n\t\tvar<\/span> xDist =<\/span> object1.x -<\/span> object2.x;\r\n\t\tvar<\/span> yDist =<\/span> object1.y -<\/span> object2.y;\r\n\t\t\/\/which side does the colision occur (get the side it occurs on)<\/span>\r\n\t\tvar<\/span> oX =<\/span> hWidths -<\/span> Math<\/span>.abs(xDist);\r\n\t\tvar<\/span> oY =<\/span> hHeights -<\/span> Math<\/span>.abs(yDist);\r\n\t\t\/\/<\/span>\r\n\t\tif<\/span> (oX >=<\/span> oY) {\r\n\t\t\tif<\/span> (yDist ><\/span> 0<\/span> &&<\/span> !<\/span>object2.isPlatform) {\/\/hit the top<\/span>\r\n\t\t\t\tdirection_string =<\/span> "top"<\/span>;\r\n\t\t\t\tobject1.y +=<\/span> oY;\r\n\t\t\t}\r\n\t\t\tif<\/span> (yDist <<\/span> 0<\/span>){\/\/standing on it<\/span>\r\n\t\t\t\tdirection_string =<\/span> "bottom"<\/span>;\r\n\t\t\t\tobject1.y -=<\/span> oY;\r\n\t\t\t}\r\n\t\t} else<\/span> {\r\n\t\t\tif<\/span> (xDist ><\/span> 0<\/span> &&<\/span> !<\/span>object2.isPlatform) {\/\/left of<\/span>\r\n\t\t\t\tdirection_string =<\/span> "left"<\/span>;\r\n\t\t\t\tobject1.x +=<\/span> oX;\r\n\t\t\t} \r\n\t\t\tif<\/span> (xDist <<\/span> 0<\/span> &&<\/span> !<\/span>object2.isPlatform) {\/\/right of<\/span>\r\n\t\t\t\tdirection_string =<\/span> "right"<\/span>;\r\n\t\t\t\tobject1.x -=<\/span> oX;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\t\/\/console.log("direction_string: "+direction_string);<\/span>\r\n\t\t\treturn<\/span> direction_string;\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
To use the above, we just need to loop through our arrays, and check if mc_frombie<\/code> collided with any arr_colidable<\/code>.
\nBasically it will look like this:<\/p>\n
<\/p>\n
\n
for<\/span> (var<\/span> i =<\/span> 0<\/span>; i <<\/span> arr_colidable.length; i++<\/span>) {\r\n     dir =<\/span> colisionCheck(mc_frombie, arr_colidable[i]);\r\n\tconsole.log(dir);\r\n};\r\n<\/pre>\n<\/div>\n
We will handle this in a Ticker<\/a>, later.<\/p>\n
*************<\/p>\n
Physics & Player Movement<\/strong><\/p>\n
I created a couple of physics prototypes for this. They are both good examples of basic “physics”, and are great for getting your head into it.<\/p>\n
Click<\/strong> to generate particles on mouse position.
\n[iframe src=”http:\/\/nathalielawhead.com\/sourcefiles\/Super_Simple_Snippets\/gravity_gibsJS.html” width=”480″ height=”500″]
\nhttp:\/\/nathalielawhead.com\/sourcefiles\/Super_Simple_Snippets\/gravity_gibsJS.html<\/a>
\nDOWNLOAD SOURCE HERE<\/a><\/p>\n
Click<\/strong> FIRE! to generate particles.
\n[iframe src=”http:\/\/nathalielawhead.com\/sourcefiles\/Projectiles\/gravity_projectileJS.html” width=”480″ height=”500″]
\nhttp:\/\/nathalielawhead.com\/sourcefiles\/Projectiles\/gravity_projectileJS.html<\/a>
\nDOWNLOAD SOURCE HERE<\/a><\/p>\n
In this game’s case, the approach is similar, except we are also checking for collision, and then we handle that appropriately (depending on platform type). Since we already have collision detection done, we just need things to fall on things now…<\/p>\n
We’ll start with setting up the Ticker<\/a> (to update positions), and the keyboard (to move the player).
\nLike I said, I’m using keymaster.js<\/code> for controlling… as things later turned out, I needed to use KEY UP<\/code> events (releasing UP<\/code> after holding it down – to jump really high, and “un-crouching”), so I had to resort to old-school keyboard functionality. This is messy, and not efficient (I know!). I will be phasing out keymaster.js<\/code> later (or fixing it so I use only keymaster.js<\/code>), but (for now) we have two approaches…<\/p>\n
We’ll create the events:<\/p>\n
<\/p>\n
\n
\/\/Events<\/span>\r\ncreatejs.Ticker.addEventListener("tick"<\/span>, event_movement_ticker);\r\ndocument<\/span>.onkeydown =<\/span> evnt_KEYDOWN;\r\ndocument<\/span>.onkeyup =<\/span> event_KEYUP;\r\n<\/pre>\n<\/div>\n
And also make sure to create evnt_removeAll();<\/code> (usage explained above). I realize that you could also use removeAllEventListeners([type])<\/code><\/a> to remove absolutely everything, but I’m not sure what events I will want to keep in the future, so I’m doing this for now…<\/p>\n
<\/p>\n
\n
\/\/remove events<\/span>\r\nfunction<\/span> evnt_removeAll(){\r\n\tcreatejs.Ticker.removeEventListener("tick"<\/span>, event_movement_ticker);\r\n\tdocument<\/span>.onkeydown =<\/span> null<\/span>;\r\n\tdocument<\/span>.onkeyup =<\/span> null<\/span>;\r\n};\r\n<\/pre>\n<\/div>\n
Now we’ll set up the keyCode<\/code>‘s necessary for KEY UP<\/code>:<\/p>\n
<\/p>\n
\n
KEY_UP =<\/span> 38<\/span>;\r\nKEY_DOWN =<\/span> 40<\/span>;\r\nKEY_S =<\/span> 83<\/span>;\r\n<\/pre>\n<\/div>\n
There are two classic key down and key up functions. These take care of ducking, and jumping.
\nKey down manages jumping mostly (at the moment). This increases mc_frombie.jumpHeight<\/code>. The longer up is pressed the higher the player will jump. This is going to be an important mechanic later on in the game. It also sets bool_keyDown<\/code> to true<\/code> to indicate that a key is being pressed.
\nKey down looks like this:<\/p>\n
<\/p>\n
\n
function<\/span> evnt_KEYDOWN(event){\r\n\t\/\/<\/span>\r\n\tif<\/span>(!<\/span>event){ var<\/span> event =<\/span> window<\/span>.event; }\r\n\t\/\/get ready for jump height - the longer it's pressed the heigher he will jump<\/span>\r\n\tif<\/span> (key.isPressed("up"<\/span>) ||<\/span> key.isPressed("w"<\/span>)) {\r\n\t\tmc_frombie.jumpHeight +=<\/span> .5<\/span>;\r\n\t\tbool_keyDown =<\/span> true<\/span>;\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
Then there’s the key up event. It sets bool_keyDown<\/code> to false<\/code>, indicating that the key has been released.
\nIn the case of the up key having been released (if the player isn’t already jumping), it sets bool_jumpDown<\/code> to true<\/code>. The jump will now be handled in the Ticker<\/code> event.
\nDucking is a little simpler. If the DOWN<\/code> or S<\/code> key are released, and mc_frombie<\/code> is ducking, set ducking to false<\/code>. The actual “un-ducking” will also be handled in the Ticker<\/code>.
\nThe finished KEY UP<\/code> event is as follows:<\/p>\n
<\/p>\n
\n
function<\/span> event_KEYUP(event){\r\n\t\/\/<\/span>\r\n\tif<\/span>(!<\/span>event){ var<\/span> event =<\/span> window<\/span>.event; }\r\n\t\/\/<\/span>\r\n\tbool_keyDown =<\/span> false<\/span>;\r\n\t\/\/now trigger the jump (only if not already jumping and the key is not down)<\/span>\r\n\t\/\/greater than default is how it tells if you triggered a jump)<\/span>\r\n\tif<\/span> ((!<\/span>bool_keyDown &&<\/span> !<\/span>mc_frombie.jumping) &&<\/span> \r\n\t\t(event.keyCode ==<\/span> KEY_UP)) {\r\n\t\tbool_jumpDown =<\/span> true<\/span>;\r\n\t};\r\n\t\/\/unduck - ducking is in ticker because it needs to happen imediately - there is a keydown delay in multiple key<\/span>\r\n\tif<\/span> ((event.keyCode ==<\/span> KEY_DOWN ||<\/span> event.keyCode ==<\/span> KEY_S) \r\n\t\t&&<\/span> (mc_frombie.ducking)) {\r\n\t\tmc_frombie.ducking =<\/span> false<\/span>;\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
Moving on to the actual player physics, I’ll break down the basics of how it works…<\/p>\n
Jumping is the first thing you’ll notice. As the if<\/code> condition suggests, you may only jump if bool_jumpDown<\/code> is true<\/code> (this is set in KEY UP event), mc_frombie<\/code> isn’t already jumping, and mc_frombie<\/code> is on the ground.
\nIf this is the case then jumping is set to true<\/code>, grounded is false<\/code> (he’s jumping now), and ducking is false<\/code> (resets ducking if he was ducking), and then set the velY<\/code> to move:
\n<\/p>\n
\n
mc_frombie.velY =<\/span> -<\/span>mc_frombie.speed *<\/span> mc_frombie.jumpHeight;\r\n<\/pre>\n<\/div>\n
That’s the important part.
\nThe last two bool_jumpDown<\/code> and bool_keyDown<\/code> being set to false<\/code> basically resets things. Once player is back on the ground you can jump again.
\nThe above looks like this:
\n<\/p>\n
\n
if<\/span> (bool_jumpDown &&<\/span> !<\/span>mc_frombie.jumping &&<\/span> mc_frombie.grounded) {\r\n\t\/\/<\/span>\r\n\tmc_frombie.jumping =<\/span> true<\/span>;\r\n\tmc_frombie.grounded =<\/span> false<\/span>;\r\n\tmc_frombie.ducking =<\/span> false<\/span>;\/\/reset ducking also if up is pressed<\/span>\r\n\t\/\/<\/span>\r\n\tmc_frombie.velY =<\/span> -<\/span>mc_frombie.speed *<\/span> mc_frombie.jumpHeight;\r\n\t\/\/reset<\/span>\r\n\tbool_jumpDown =<\/span> false<\/span>;\r\n\tbool_keyDown =<\/span> false<\/span>;\r\n}\r\n<\/pre>\n<\/div>\n
There’s another condition that follows which resets mc_frombie.jumpHeight<\/code> to the default value.
\n<\/p>\n
\n
if<\/span>(!<\/span>bool_jumpDown &&<\/span> mc_frombie.jumping &&<\/span> !<\/span>mc_frombie.grounded){\r\n\tmc_frombie.jumpHeight =<\/span> 1.5<\/span>;\r\n};\r\n<\/pre>\n<\/div>\n
After jumping you’ll notice ducking. Ducking is simple. If DOWN<\/code> or S<\/code>, and you’re not jumping, and on the ground, player_duck(\"duck\");<\/code> is called.
\n<\/p>\n
\n
if<\/span> ((key.isPressed("down"<\/span>) ||<\/span> key.isPressed("s"<\/span>)) &&<\/span> \r\n\t(!<\/span>mc_frombie.jumping &&<\/span> mc_frombie.grounded)) {\r\n\tplayer_duck("duck"<\/span>);\r\n}\r\n<\/pre>\n<\/div>\n
You may then unduck only if height<\/code> is less than the default (so no conflict with other gotoAndStop<\/code> labels takes place), and if mc_frombie.ducking<\/code> is false<\/code>. If that’s the case then the height<\/code> is set back to normal, and player is set back to \"walk\"<\/code>.
\nUnduck looks like this:
\n<\/p>\n
\n
if<\/span>(!<\/span>mc_frombie.ducking &&<\/span> mc_frombie.height<<\/span>110<\/span>){\r\n\tmc_frombie.height =<\/span> 110<\/span>;\r\n\tmc_frombie.gotoAndStop("walk"<\/span>);\r\n};\r\n<\/pre>\n<\/div>\n
Finally we have our left and right movements.
\nLeft\/right looks like this, and is fairly self explanatory:
\n<\/p>\n
\n
\/\/left\/right movement<\/span>\r\nif<\/span> ((key.isPressed("left"<\/span>) ||<\/span> key.isPressed("a"<\/span>))) {\r\n    if<\/span> (mc_frombie.velX ><\/span> -<\/span>mc_frombie.speed) {\r\n        mc_frombie.velX-=<\/span>mc_frombie.speed;\r\n    }\r\n}\r\nif<\/span> ((key.isPressed("right"<\/span>) ||<\/span> key.isPressed("d"<\/span>))) {\r\n\tif<\/span> (mc_frombie.velX <<\/span> mc_frombie.speed) {\r\n        mc_frombie.velX+=<\/span>mc_frombie.speed;\r\n    }\r\n}\r\n<\/pre>\n<\/div>\n
After we’re done with all the above, we need to set mc_frombie’s velX<\/code> and velY<\/code> (friction, and gravity), and set mc_frombie.grounded<\/code> to false<\/code>. Basically calculate all the above to apply later… which looks like this:<\/p>\n
<\/p>\n
\n
\/\/friction to velX and and gravity to velY (horizontal and vertical values)<\/span>\r\nmc_frombie.velX *=<\/span> friction;\r\nmc_frombie.velY +=<\/span> gravity;\r\n\/\/<\/span>\r\nmc_frombie.grounded =<\/span> false<\/span>;\r\n<\/pre>\n<\/div>\n
Then we have the fun part! Checking collision, and acting appropriately.
\nWe loop through arr_colidable<\/code>, and set variable dir<\/code> to the returned value of colisionCheck<\/code>.
\nThen there’s our condition for each direction (left, right, top, or bottom).
\nLeft and right are basically the same thing. They stop velX<\/code>, and set mc_frombie.jumping<\/code> to false<\/code>.
\nBottom means you’re standing on the ground. So mc_frombie.grounded<\/code> is set to true<\/code> and mc_frombie.jumping<\/code> is set to false<\/code> (you’re not in the air anymore).
\nTop means that he hit his head on the bottom of a platform. velY<\/code> is set back (push him down), and then the \"ouch\"<\/code> state is set — he’s ducking, and I’ll have a cute animation there.
\nThe entire block looks like this:<\/p>\n
<\/p>\n
\n
for<\/span> (var<\/span> i =<\/span> 0<\/span>; i <<\/span> arr_colidable.length; i++<\/span>) {\r\n    \/\/<\/span>\r\n    dir =<\/span> colisionCheck(mc_frombie, arr_colidable[i]);\r\n\t\/\/<\/span>\r\n    if<\/span> (dir ===<\/span> "left"<\/span> ||<\/span> dir ===<\/span> "right"<\/span>) {\r\n        mc_frombie.velX =<\/span> 0<\/span>;\r\n        mc_frombie.jumping =<\/span> false<\/span>;\r\n    } else<\/span> if<\/span> (dir ===<\/span> "bottom"<\/span>) {\r\n        mc_frombie.grounded =<\/span> true<\/span>;\r\n        mc_frombie.jumping =<\/span> false<\/span>;\r\n    } else<\/span> if<\/span> (dir ===<\/span> "top"<\/span>) {\r\n        mc_frombie.velY *=<\/span> -<\/span>1<\/span>;\r\n\t\t\/\/if you hit the top then he protects his head (you scared him)<\/span>\r\n\t\t\/\/jumping resets this<\/span>\r\n\t\tplayer_duck("ouch"<\/span>);\r\n\t\t\/\/<\/span>\r\n    }\r\n}\r\n<\/pre>\n<\/div>\n
After that we manage velY<\/code> if he’s on the ground (not jumping anymore, above collision with ground took place).
\nJust reset\/set velY<\/code> to 0 (default state):<\/p>\n
<\/p>\n
\n
if<\/span>(mc_frombie.grounded){\r\n     mc_frombie.velY =<\/span> 0<\/span>;\r\n}\r\n<\/pre>\n<\/div>\n
FINALLY, we need to set the player’s x<\/code> and y<\/code> to the calculated values.
\nSimply put:<\/p>\n
<\/p>\n
\n
mc_frombie.x +=<\/span> mc_frombie.velX;\r\nmc_frombie.y +=<\/span> mc_frombie.velY;\r\n<\/pre>\n<\/div>\n
The last bit manages the player falling off the screen and dying, or walking off the right and winning:<\/p>\n
<\/p>\n
\n
\/\/Player death<\/span>\r\n\/\/fell off stage<\/span>\r\nif<\/span>(mc_frombie.y ><\/span> (num_stageHeight +<\/span> mc_frombie.height)){\r\n\tplayer_die();\r\n};\r\n\/\/Player went to next screen<\/span>\r\nif<\/span>(mc_frombie.x><\/span> (num_stageWidth +<\/span> mc_frombie.width)){\r\n\tif<\/span>(bool_lastpanel){\r\n\t\tplayer_win();\r\n\t}else<\/span>{\r\n\t\tconsole.log("next panel"<\/span>);\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
That’s it! The entire thing looks like this:<\/p>\n
<\/p>\n
\n
function<\/span> event_movement_ticker(event) {\r\n\t\/\/key presses<\/span>\r\n\t\/\/jump<\/span>\r\n\t\/\/make the jump - set to values - reset after<\/span>\r\n\tif<\/span> (bool_jumpDown &&<\/span> !<\/span>mc_frombie.jumping &&<\/span> mc_frombie.grounded) {\r\n\t\t\/\/<\/span>\r\n\t\tmc_frombie.jumping =<\/span> true<\/span>;\r\n\t\tmc_frombie.grounded =<\/span> false<\/span>;\r\n\t\tmc_frombie.ducking =<\/span> false<\/span>;\/\/reset ducking also if up is pressed<\/span>\r\n\t\t\/\/<\/span>\r\n\t\tmc_frombie.velY =<\/span> -<\/span>mc_frombie.speed *<\/span> mc_frombie.jumpHeight;\r\n\t\t\/\/reset<\/span>\r\n\t\tbool_jumpDown =<\/span> false<\/span>;\r\n\t\tbool_keyDown =<\/span> false<\/span>;\r\n\t}\r\n\t\/\/reset the jump height while in the air<\/span>\r\n\t\/\/if done above sometimes it doesn't reset<\/span>\r\n\tif<\/span>(!<\/span>bool_jumpDown &&<\/span> mc_frombie.jumping &&<\/span> !<\/span>mc_frombie.grounded){\r\n\t\tmc_frombie.jumpHeight =<\/span> 1.5<\/span>;\r\n\t};\r\n\t\/\/start ducking - ducking is in the ticker because it needs to trigger RIGHT AWAY<\/span>\r\n\tif<\/span> ((key.isPressed("down"<\/span>) ||<\/span> key.isPressed("s"<\/span>)) &&<\/span> \r\n\t\t(!<\/span>mc_frombie.jumping &&<\/span> mc_frombie.grounded)) {\r\n\t\t\/\/duck<\/span>\r\n\t\tplayer_duck("duck"<\/span>);\r\n\t}\r\n\t\/\/unduck - only if also height is less than default so that no conflict with other gotoAndStop labels...<\/span>\r\n\tif<\/span>(!<\/span>mc_frombie.ducking &&<\/span> mc_frombie.height<<\/span>110<\/span>){\r\n\t\tmc_frombie.height =<\/span> 110<\/span>;\r\n\t\tmc_frombie.gotoAndStop("walk"<\/span>);\r\n\t};\r\n\t\/\/left\/right movement<\/span>\r\n\tif<\/span> ((key.isPressed("left"<\/span>) ||<\/span> key.isPressed("a"<\/span>))) {\r\n        if<\/span> (mc_frombie.velX ><\/span> -<\/span>mc_frombie.speed) {\r\n            mc_frombie.velX-=<\/span>mc_frombie.speed;\r\n        }\r\n\t}\r\n\t\/\/stop player movement<\/span>\r\n\tif<\/span> ((key.isPressed("right"<\/span>) ||<\/span> key.isPressed("d"<\/span>))) {\r\n\t\t\/\/<\/span>\r\n\t\tif<\/span> (mc_frombie.velX <<\/span> mc_frombie.speed) {\r\n            mc_frombie.velX+=<\/span>mc_frombie.speed;\r\n        }\r\n\t\t\/\/<\/span>\r\n\t}\r\n\t\/\/friction to velX and and gravity to velY (horizontal and vertical values)<\/span>\r\n\tmc_frombie.velX *=<\/span> friction;\r\n    mc_frombie.velY +=<\/span> gravity;\r\n\t\/\/<\/span>\r\n\tmc_frombie.grounded =<\/span> false<\/span>;\r\n\t\/\/<\/span>\r\n\t\/\/HIT-----<\/span>\r\n    for<\/span> (var<\/span> i =<\/span> 0<\/span>; i <<\/span> arr_colidable.length; i++<\/span>) {\r\n        \/\/<\/span>\r\n        dir =<\/span> colisionCheck(mc_frombie, arr_colidable[i]);\r\n\t\t\/\/<\/span>\r\n        if<\/span> (dir ===<\/span> "left"<\/span> ||<\/span> dir ===<\/span> "right"<\/span>) {\r\n            mc_frombie.velX =<\/span> 0<\/span>;\r\n            mc_frombie.jumping =<\/span> false<\/span>;\r\n        } else<\/span> if<\/span> (dir ===<\/span> "bottom"<\/span>) {\r\n            mc_frombie.grounded =<\/span> true<\/span>;\r\n            mc_frombie.jumping =<\/span> false<\/span>;\r\n        } else<\/span> if<\/span> (dir ===<\/span> "top"<\/span>) {\r\n            mc_frombie.velY *=<\/span> -<\/span>1<\/span>;\r\n\t\t\t\/\/if you hit the top then he protects his head (you scared him)<\/span>\r\n\t\t\t\/\/jumping resets this<\/span>\r\n\t\t\tplayer_duck("ouch"<\/span>);\r\n\t\t\t\/\/<\/span>\r\n        }\r\n    }\r\n\t\/\/END HIT-----<\/span>\r\n\t\/\/if on the ground then set velY to default state<\/span>\r\n\tif<\/span>(mc_frombie.grounded){\r\n         mc_frombie.velY =<\/span> 0<\/span>;\r\n    }\r\n\t\/\/now set the actual x and y to calculated values<\/span>\r\n\tmc_frombie.x +=<\/span> mc_frombie.velX;\r\n    mc_frombie.y +=<\/span> mc_frombie.velY;\r\n\t\/\/<\/span>\r\n\t\/\/Player death<\/span>\r\n\t\/\/fell off stage<\/span>\r\n\tif<\/span>(mc_frombie.y ><\/span> (num_stageHeight +<\/span> mc_frombie.height)){\r\n\t\tplayer_die();\r\n\t};\r\n\t\/\/Player went to next screen<\/span>\r\n\tif<\/span>(mc_frombie.x><\/span> (num_stageWidth +<\/span> mc_frombie.width)){\r\n\t\tif<\/span>(bool_lastpanel){\r\n\t\t\tplayer_win();\r\n\t\t}else<\/span>{\r\n\t\t\tconsole.log("next panel"<\/span>);\r\n\t\t};\r\n\t};\r\n}\r\n<\/pre>\n<\/div>\n
Finished! Now we have the groundwork for a simple platformer game.
\nThis is stage one. Obviously it’s a work in progress, and I still need to optimize parts, but… small steps! :)
\nI’m now moving on to incorporating a few levels, and some of the features I want in the game… as well as WAY better artwork. :)<\/p>\n
DOWNLOAD SOURCE HERE<\/a><\/p>\n
PLAY IT HERE<\/a><\/p>\n
Or check out my other tutorials:
\n* Tutorial: Building A Game In Edge Animate (Offender)<\/a>
\n* Tutorial: Building A Game With Flash HTML5 Canvas & CreateJS (Haxatron 2000)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
DOWNLOAD SOURCE HERE I’ve been developing a totally new game for Tetrageddon. It’s going to be available for mobile (iOS, and Android), as well as the desktop. This is an HTML5 game (for a change), with CreateJS, using FlashCC’s HTML5 Canvas document. Doing so will make things easier for me animation wise, as well as managing complex animated “cut scenes”, and other graphical aspects… The game is codenamed “Face The Music” because it will essentially be about death and “giving up” — in a playful yet poetic pixel art style. :) Best of all, “Face The Music” is a platformer...<\/p>\n","protected":false},"author":1,"featured_media":4522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[30,12],"tags":[],"class_list":["post-3140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-resources"],"_links":{"self":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=3140"}],"version-history":[{"count":11,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3140\/revisions"}],"predecessor-version":[{"id":3151,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3140\/revisions\/3151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4522"}],"wp:attachment":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=3140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=3140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=3140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}