8 ms·

Game Mechanic Explorer – examples for game mechanics, algorithms, and effects

404 points by davidbarker 13y ago

NoPiece 13y ago
Really nice! It would be fun to expose a few fields for each example to adjust the core variables (speed, acceleration, gravity).
albeec13 13y ago
This is great! I've been tinkering with simple game mechanics like these, and you've included a few I've never looked it.
ekmartin 13y ago
Good job! :)
barbs 13y ago
At first I thought the name was a bit misleading. It looked more like a how-to on visual effects than underlying mechanics. But then I saw the linked page, and it gave a pretty decent definition of Game Mechanics: http://www.lostgarden.com/2006/10/what-are-game-mechanics.html http://www.lostgarden.com/2006/10/what-are-game-mechanics.ht...
- arghbleargh 13y ago
  Yes, I guess the examples shown are indeed "game mechanics" of a sort, but it seems to be heavily focused on game physics, at least for now. When I saw the title I was thinking of something much broader that would include things like how to use items, how to level up, etc.
  - TheZenPsycho 13y ago
    I was thinking even broader, including mechanics for games like chess and checkers, and maybe a smattering of graph theory for analysing "decision trees". Pretty abstract game theoretical stuff, hopefully brought down to earth and made practical enough for a moron like me to understand in more detail than just those broad buzzwords I was just able to throw around.
  - deleted 13y ago
    [deleted]
- jcromartie 13y ago
  Game mechanics are the rule systems that give the game goals or meaning. Asteroids-like spaceship movement is not a game mechanic. Shooting bullets is not a game mechanic. The system that is the feedback loop of moving to chase/avoid asteroids while shooting them and creating more and faster obstacles and targets is a game mechanic.
vinkelhake 13y ago
Nice stuff. I noticed something slightly weird in the "Spaceship motion / With drag" example. Looking at the code it seems that drag is applied individually on the X and Y axis. If you rotate the ship just a little bit, gather some speed and then let go, the ship will have its horizontal speed zero out rather quickly and the ship will glide sideways until it comes to a halt in the vertical direction. Can't write more now, need to go play with the other examples!
- al2o3cr 13y ago
  "drag" seems like a bit of a misnomer for what that parameter is doing - the effect on x and y velocity is calculated separately, so you're always going to get the little "twist" at the end when velocity on one axis drops below the drag value. See also the source here: https://github.com/photonstorm/phaser/blob/master/src/physics/arcade/World.js#L265 https://github.com/photonstorm/phaser/blob/master/src/physic... and the doc comment for computeVelocity a couple lines down.
lobotryas 13y ago
Wow, awesome. The "Homing Missiles, Flocking" demo is pretty much a game by itself already. "Variable Jump Height" just needs a score meter and some obstacles and that's also a game all by itself (ala Flappy Bird). Great collection!
TheZenPsycho 13y ago
I tried my hand at a side scrolling platformer in phaser myself some time back. When I came up to variable jump height I tried a solution very similar to the one presented here, but I just could not get my jumps to feel at all "right". Jump height that's modulated by initial or continued velocity feels weird and floaty and a bit hard to precisely control. I finally broke down and found a detailed analysis of the physics maths used on the original Super Mario Bros. I discovered to my surprise that variable height was achieved SMB1 by temporarily reducing gravity during the time the button was held down, capped by a time limit. Using this rule, jumps feel very solid precise and look more realistic than the image of a character with a continuously firing rocket under its feet.
- nitrogen 13y ago
  So altering the acceleration rather than the velocoty gives more natural results? I wonder if our brains are good at first derivatives, but nothing beyond, so a discontinuity or warp in acceleration is less noticeable. SMB1 does have fantastic variable jump height.
  - TheZenPsycho 13y ago
    I think it's that, regardless of the "strength" of your jump, the curve is always fast at first, then slowing against gravity following a natural quadratic-ish curve. So strong jumps, and weak jumps both always look like the first "push" happened at the very start. As I said before, the velocity approach looks a bit more like the character has a jetpack, and is rocketing into the air. That is, the accelleration is slow. then fast, then slow again (as gravity takes over). Instead of just fast then slow. re:perception, derivatives, and discontinuities. I think you are right. In bezier curves, discontinuities are numbered according to which derivative the discontinuity occurs in. So if you draw a straight line with a corner in it, in adobe illustrator, that's a c0 discontinuity. A curved line, where the control points for the curve after the vector are the same angle, but different lengths are a c1 discontinuity (but c0 continuous), and so on. It's useful to number these, but c0 continuous "looks" smooth, always. edit: sorry, I've misnumbered these. I should say that g1 continuous always looks smooth. http://www.clemson.edu/ces/credo/AID/ACIS_HELP/HTM/DATA/ACIS/FCG/03MATH/0003.HTM http://www.clemson.edu/ces/credo/AID/ACIS_HELP/HTM/DATA/ACIS...
keyle 13y ago
PS: Phaser is a very good framework. I've used with Typescript and that's as close as you can get from AS3 and flash, without flash. (Cause you know, flash is the birth of all evil yaddi yadda)
thyroxo 13y ago
Wonderful! I can really see this as a great tool for when you get 'writer's block' during a game jam!
dpcan 13y ago
This is a great way to present the mechanics with phaser code to back it up! I would love to see this teach-by-example format used to show some collision detection (polygons, squares, circles, pixel), scrolling (top-down, side), expanded gravity with objects that have gravity, particles, and controls. Then there are all the "boring" mechanics like saving scores and other data, main menu systems, options screens with volume control, toggles, linking to websites, tweeting scores, etc, etc, etc.
afhdshufdufdo 13y ago
Neat examples, but Phaser is pretty choppy in FF 27/OS X and my mac is recent.
- _random_ 13y ago
  It uses JavaScript.
xvedejas 13y ago
A suggestion, assuming the author reads HN: One very basic game mechanic that is so far missing is strategies for collision detection. I would be quite interested to see interactive examples (and code examples) that do a good job of covering that topic.
- rmb177 13y ago
  I found the following tutorials on collision helpful: http://www.wildbunny.co.uk/blog/2011/04/06/physics-engines-for-dummies/ http://www.wildbunny.co.uk/blog/2011/04/06/physics-engines-f... http://www.wildbunny.co.uk/blog/2011/04/20/collision-detection-for-dummies/ http://www.wildbunny.co.uk/blog/2011/04/20/collision-detecti...
- jcromartie 13y ago
  Collision detection is not a game mechanic...
  - xvedejas 13y ago
    It's not a gameplay mechanic, sure, but it's a mechanic used when coding games, which seems to be the point of the website anyway.
Vermeulen 13y ago
I love these interactive demos of game dev techniques. Another great one is this Aztez post on fighting game effects - http://aztez.com/blog/2014/01/06/anatomy-of-a-successful-attack/ http://aztez.com/blog/2014/01/06/anatomy-of-a-successful-att... - and Vlambeer's demo in their 'art of screenshake' talk https://www.youtube.com/watch?v=AJdEqssNZ-U https://www.youtube.com/watch?v=AJdEqssNZ-U
nichochar 13y ago
This is fantastically useful, thank you so much to whoever made this. Such a great index of clean helpers
unterstrom 13y ago
This is really great. I for one hate the drag component in platform games. It makes them always feel very sluggish and imprecise. Most of the Mario games are unplayable for me because of this behavior.
jcromartie 13y ago
These are not game mechanics. http://en.wikipedia.org/wiki/Game_mechanics#Game_mechanics_vs._gameplay http://en.wikipedia.org/wiki/Game_mechanics#Game_mechanics_v... (Cross posted from another reply I made:) Asteroids-like spaceship movement is not a game mechanic. Shooting bullets is not a game mechanic. A game mechanic would be the system that is the feedback loop of moving to chase/avoid asteroids while shooting them and creating more and faster obstacles and targets.
- vanderZwan 13y ago
  Will you are probably technically correct, it would be helpful if you could explain what they are instead. Because they're a bit more than just applied physics - the choice in jumping mechanics has a fundamental influence on gameplay, so there is at least some kind of relation to game mechanics.
  - jcromartie 13y ago
    You can look at it like this: mechanics are abstract, while gameplay is concrete. The gameplay is what the player can actually do at any given point in the course of the game: move a piece, make Mario jump, shoot a gun. Rules define both the valid inputs and the reaction of the game to player input: you can't walk through walls, monsters drop loot, XP lets you level up. Mechanics are the higher-level constructs resulting from the feedback loops created by the game's rules, in reaction to choices that the player makes. The example of Asteroids: The gameplay is moving a spaceship and shooting asteroids. The game rules state that you progress to the next level by clearing all of the asteroids from the screen. When you shoot a larger asteroid, it breaks into several smaller pieces. When you shoot the smallest asteroids, they disappear. Colliding with an asteroid means you lose a ship, and losing all of your ships means you lose the game. The mechanics that result from this are evading the asteroids on the screen, judging the risk of shooting each particular asteroid, choosing the right place to be and the right time to shoot, allowing you to stay alive to eliminate them all.
    - NoPiece 13y ago
      Yes, it is more like these are examples of the building blocks that you build game mechanics around. It is interesting that the author of the page calls them "examples for game mechanics" not examples of game mechanics, so he may be in agreement with you.
apitaru 13y ago
Great little resource for building your first game. That said, the term 'Mechanic' in game design has multiple meanings. My favorite is in context of Dynamics and Aesthetics, as explained here - (pdf) http://www.cs.northwestern.edu/~hunicke/MDA.pdf http://www.cs.northwestern.edu/~hunicke/MDA.pdf
Gracana 13y ago
This is a really cool idea! An issue I noticed: After loading a lot of examples, the page seems to slow down a lot, like everything else is still in the background somewhere.

404 points by davidbarker 13y ago

Really nice! It would be fun to expose a few fields for each example to adjust the core variables (speed, acceleration, gravity).

albeec13 13y ago

This is great! I've been tinkering with simple game mechanics like these, and you've included a few I've never looked it.

ekmartin 13y ago

Good job! :)

barbs 13y ago

At first I thought the name was a bit misleading. It looked more like a how-to on visual effects than underlying mechanics. But then I saw the linked page, and it gave a pretty decent definition of Game Mechanics: http://www.lostgarden.com/2006/10/what-are-game-mechanics.html http://www.lostgarden.com/2006/10/what-are-game-mechanics.ht...

arghbleargh 13y ago
Yes, I guess the examples shown are indeed "game mechanics" of a sort, but it seems to be heavily focused on game physics, at least for now. When I saw the title I was thinking of something much broader that would include things like how to use items, how to level up, etc.
- TheZenPsycho 13y ago
  I was thinking even broader, including mechanics for games like chess and checkers, and maybe a smattering of graph theory for analysing "decision trees". Pretty abstract game theoretical stuff, hopefully brought down to earth and made practical enough for a moron like me to understand in more detail than just those broad buzzwords I was just able to throw around.
- deleted 13y ago
  [deleted]
jcromartie 13y ago
Game mechanics are the rule systems that give the game goals or meaning. Asteroids-like spaceship movement is not a game mechanic. Shooting bullets is not a game mechanic. The system that is the feedback loop of moving to chase/avoid asteroids while shooting them and creating more and faster obstacles and targets is a game mechanic.

vinkelhake 13y ago

Nice stuff. I noticed something slightly weird in the "Spaceship motion / With drag" example. Looking at the code it seems that drag is applied individually on the X and Y axis. If you rotate the ship just a little bit, gather some speed and then let go, the ship will have its horizontal speed zero out rather quickly and the ship will glide sideways until it comes to a halt in the vertical direction. Can't write more now, need to go play with the other examples!

al2o3cr 13y ago
"drag" seems like a bit of a misnomer for what that parameter is doing - the effect on x and y velocity is calculated separately, so you're always going to get the little "twist" at the end when velocity on one axis drops below the drag value. See also the source here: https://github.com/photonstorm/phaser/blob/master/src/physics/arcade/World.js#L265 https://github.com/photonstorm/phaser/blob/master/src/physic... and the doc comment for computeVelocity a couple lines down.

lobotryas 13y ago

Wow, awesome. The "Homing Missiles, Flocking" demo is pretty much a game by itself already. "Variable Jump Height" just needs a score meter and some obstacles and that's also a game all by itself (ala Flappy Bird). Great collection!

TheZenPsycho 13y ago

I tried my hand at a side scrolling platformer in phaser myself some time back. When I came up to variable jump height I tried a solution very similar to the one presented here, but I just could not get my jumps to feel at all "right". Jump height that's modulated by initial or continued velocity feels weird and floaty and a bit hard to precisely control. I finally broke down and found a detailed analysis of the physics maths used on the original Super Mario Bros. I discovered to my surprise that variable height was achieved SMB1 by temporarily reducing gravity during the time the button was held down, capped by a time limit. Using this rule, jumps feel very solid precise and look more realistic than the image of a character with a continuously firing rocket under its feet.

nitrogen 13y ago
So altering the acceleration rather than the velocoty gives more natural results? I wonder if our brains are good at first derivatives, but nothing beyond, so a discontinuity or warp in acceleration is less noticeable. SMB1 does have fantastic variable jump height.
- TheZenPsycho 13y ago
  I think it's that, regardless of the "strength" of your jump, the curve is always fast at first, then slowing against gravity following a natural quadratic-ish curve. So strong jumps, and weak jumps both always look like the first "push" happened at the very start. As I said before, the velocity approach looks a bit more like the character has a jetpack, and is rocketing into the air. That is, the accelleration is slow. then fast, then slow again (as gravity takes over). Instead of just fast then slow. re:perception, derivatives, and discontinuities. I think you are right. In bezier curves, discontinuities are numbered according to which derivative the discontinuity occurs in. So if you draw a straight line with a corner in it, in adobe illustrator, that's a c0 discontinuity. A curved line, where the control points for the curve after the vector are the same angle, but different lengths are a c1 discontinuity (but c0 continuous), and so on. It's useful to number these, but c0 continuous "looks" smooth, always. edit: sorry, I've misnumbered these. I should say that g1 continuous always looks smooth. http://www.clemson.edu/ces/credo/AID/ACIS_HELP/HTM/DATA/ACIS/FCG/03MATH/0003.HTM http://www.clemson.edu/ces/credo/AID/ACIS_HELP/HTM/DATA/ACIS...

keyle 13y ago

PS: Phaser is a very good framework. I've used with Typescript and that's as close as you can get from AS3 and flash, without flash. (Cause you know, flash is the birth of all evil yaddi yadda)

thyroxo 13y ago

Wonderful! I can really see this as a great tool for when you get 'writer's block' during a game jam!

dpcan 13y ago

This is a great way to present the mechanics with phaser code to back it up! I would love to see this teach-by-example format used to show some collision detection (polygons, squares, circles, pixel), scrolling (top-down, side), expanded gravity with objects that have gravity, particles, and controls. Then there are all the "boring" mechanics like saving scores and other data, main menu systems, options screens with volume control, toggles, linking to websites, tweeting scores, etc, etc, etc.

afhdshufdufdo 13y ago

Neat examples, but Phaser is pretty choppy in FF 27/OS X and my mac is recent.

_random_ 13y ago
It uses JavaScript.

xvedejas 13y ago

A suggestion, assuming the author reads HN: One very basic game mechanic that is so far missing is strategies for collision detection. I would be quite interested to see interactive examples (and code examples) that do a good job of covering that topic.

rmb177 13y ago
I found the following tutorials on collision helpful: http://www.wildbunny.co.uk/blog/2011/04/06/physics-engines-for-dummies/ http://www.wildbunny.co.uk/blog/2011/04/06/physics-engines-f... http://www.wildbunny.co.uk/blog/2011/04/20/collision-detection-for-dummies/ http://www.wildbunny.co.uk/blog/2011/04/20/collision-detecti...
jcromartie 13y ago
Collision detection is not a game mechanic...
- xvedejas 13y ago
  It's not a gameplay mechanic, sure, but it's a mechanic used when coding games, which seems to be the point of the website anyway.

Vermeulen 13y ago

I love these interactive demos of game dev techniques. Another great one is this Aztez post on fighting game effects - http://aztez.com/blog/2014/01/06/anatomy-of-a-successful-attack/ http://aztez.com/blog/2014/01/06/anatomy-of-a-successful-att... - and Vlambeer's demo in their 'art of screenshake' talk https://www.youtube.com/watch?v=AJdEqssNZ-U https://www.youtube.com/watch?v=AJdEqssNZ-U

nichochar 13y ago

This is fantastically useful, thank you so much to whoever made this. Such a great index of clean helpers

unterstrom 13y ago

This is really great. I for one hate the drag component in platform games. It makes them always feel very sluggish and imprecise. Most of the Mario games are unplayable for me because of this behavior.

jcromartie 13y ago

These are not game mechanics. http://en.wikipedia.org/wiki/Game_mechanics#Game_mechanics_vs._gameplay http://en.wikipedia.org/wiki/Game_mechanics#Game_mechanics_v... (Cross posted from another reply I made:) Asteroids-like spaceship movement is not a game mechanic. Shooting bullets is not a game mechanic. A game mechanic would be the system that is the feedback loop of moving to chase/avoid asteroids while shooting them and creating more and faster obstacles and targets.

vanderZwan 13y ago
Will you are probably technically correct, it would be helpful if you could explain what they are instead. Because they're a bit more than just applied physics - the choice in jumping mechanics has a fundamental influence on gameplay, so there is at least some kind of relation to game mechanics.
- jcromartie 13y ago
  You can look at it like this: mechanics are abstract, while gameplay is concrete. The gameplay is what the player can actually do at any given point in the course of the game: move a piece, make Mario jump, shoot a gun. Rules define both the valid inputs and the reaction of the game to player input: you can't walk through walls, monsters drop loot, XP lets you level up. Mechanics are the higher-level constructs resulting from the feedback loops created by the game's rules, in reaction to choices that the player makes. The example of Asteroids: The gameplay is moving a spaceship and shooting asteroids. The game rules state that you progress to the next level by clearing all of the asteroids from the screen. When you shoot a larger asteroid, it breaks into several smaller pieces. When you shoot the smallest asteroids, they disappear. Colliding with an asteroid means you lose a ship, and losing all of your ships means you lose the game. The mechanics that result from this are evading the asteroids on the screen, judging the risk of shooting each particular asteroid, choosing the right place to be and the right time to shoot, allowing you to stay alive to eliminate them all.
  - NoPiece 13y ago
    Yes, it is more like these are examples of the building blocks that you build game mechanics around. It is interesting that the author of the page calls them "examples for game mechanics" not examples of game mechanics, so he may be in agreement with you.

apitaru 13y ago

Great little resource for building your first game. That said, the term 'Mechanic' in game design has multiple meanings. My favorite is in context of Dynamics and Aesthetics, as explained here - (pdf) http://www.cs.northwestern.edu/~hunicke/MDA.pdf http://www.cs.northwestern.edu/~hunicke/MDA.pdf

Gracana 13y ago

This is a really cool idea! An issue I noticed: After loading a lot of examples, the page seems to slow down a lot, like everything else is still in the background somewhere.