-
Notifications
You must be signed in to change notification settings - Fork 2
Phaser
We are going to start brainstorming ideas for games. Here are some tips to help you work in groups:
-
Defer judgment. Creative spaces don't judge. They let the ideas flow, so that people can build on eachother and foster great ideas. You never know where a good idea is going to come from, the key is make everyone feel like they can say the idea on their mind and allow others to build on it.
-
Encourage wild ideas. Wild ideas can often give rise to creative leaps. In thinking about ideas that are wacky or out there we tend to think about what we really want without the constraints of technology or materials. We can then take those magical possibilities and perhaps invent new technologies to deliver them. We say embrace the most out-of-the-box notions and build build build...
-
Build on the ideas of others. Being positive and building on the ideas of others take some skill. In conversation, we try to use "and" instead of "but"...
-
Stay focused on the topic. We try to keep the discussion on target, otherwise you can diverge beyond the scope of what we're trying to design for.
-
One conversation at a time. When different conversations are going on within a team, no one can focus.
-
Be visual. In live brainstorms we use coloured markers to write on Post-its that are put on a wall. Nothing gets an idea across faster than drawing it. Doesn’t matter how terrible of a sketcher you are! It's all about the idea behind your sketch. You could also try your hand at sketching it out or mocking it up on the computer. We love visual ideas as the images make them memorable. Does someone elses idea excite you? Maybe make them an image to go with their idea.
-
Go for quantity. Aim for as many new ideas as possible. In a good session, up to 100 ideas are generated in 60 minutes. Crank the ideas out quickly. Try setting a goal for the number of ideas you’ll get to in a certain amount of time to provide some stoke.
Now that you have a better idea of how some popular games are constructed, let's take a shot at coming up with some ourselves. You'll be in groups of 3 and each round will be 5 minutes long. There are some constraints for the game, but everything else is open for you to decide! Try to come up with as many of the fundamental game components (game state, player/avatars, mechanics, dynamics, goals, theme) we discussed as possible. The game design process involves a lot of testing and refining, so these ideas won't be polished and ready to play, but they will hopefully be ready for you to implement and playtest. If you're having trouble coming up with an idea in 5 minutes, try thinking about more outrageous and wild ideas and build off of your group's suggestions. (This is a tried and true method used by design firms like IDEO so have at it!)
Round 1 (dynamic): Your game must have a race to the end dynamic. Players start at point A, and the first to point B wins.
Round 2 (mechanic): Your game must use items in some way. Players can walk and pick up items, but the amount, action, and value of the items is up to you.
Round 5 (players/avatars): Your game must accommodate a large number (up to 20) people playing at once, connected through their phones.
Round 6 (theme): Take an existing book, movie, story, etc and adapt it as a game. You can encompass the entire story in the game or focus on a particular portion of it.
Round 10 (mechanic): Your game must use math (arithmetic, algebra, geometry) as the basis for the gameplay
Round 11 (user group, mechanic, theme): Your game must be dinosaur themed and use the camera in some way. This should be targeted at users 65 and up.
Round 12 (mechanics): Your game must involve drawing something on the screen and tactical maneuvering.
Round 13 (mechanics): Your game must use the accelerometer as the primary means of controlling the avatar
Phaser is a framework which allows you to make games in Javascript. It makes things like loading images and maps and handling things like physics easy so you can focus on making an awesome game. We're going to be using this to make games so lets go through a demo and understand how it works.
In the Github app, click the + icon to clone a new repository. Select MissionBit/phaser-template
and clone it. When you open the folder in Brackets, you can use live preview to test it out.
Now you have a game running! We'll go over what each line of code does and then we'll start playing around with it.
You can change the line
game.stage.backgroundColor = '#999999';
to be any color you like.
You can add images to the project and then modify the
game.load.image('logo', 'missionbit.png');
line to match your image name. For example, if you have an image like toastdog.png
you would change the line to
game.load.image('logo', 'toastdog.png');
- Change the image for the player!
Add a variable called leftKey to the top of the code where var game is:
var leftKey;
Then add a line in the create function which adds a key listener and saves it in
the variable leftKey:
leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
Now we have a way to tell if the left arrow key is being pressed, so lets use that
to move the player to the left in the update function:
if (leftKey.isDown) {
this.sprite.position.x -= 5;
}
- Try changing the speed by messing with the number 5 in the last line of code
- Try adding keys for the up, right, and down keys.
First lets remove the rotation by deleting the line this.sprite.angle += 1.
We need to tell Phaser to enable physics in the create function:
game.physics.startSystem(Phaser.Physics.ARCADE);
Then we need to tell Phaser in the create function that our player should be affected by physics and also
bounce off the walls:
game.physics.arcade.enable(this.sprite);
this.sprite.body.collideWorldBounds = true;
Finally we need to tell Phaser in the create function how strong to make gravity on the player:
this.sprite.body.gravity.y = 200;
Now you have physics!
- Try adding jump functionality. Hint: Phaser's physics will handle all the math
for you! When you press the up key, change the
velocityof the player, not the position. Something likethis.sprite.body.velocity.y = -100;