Using a spreadsheet of many rows

It's-The-Bat · July 17, 2015

I am new to game development and I'd like to know how I can use this big spritesheet for the character. It has rows and rows of sprites and some of them are uneven, but this spritesheet is one of the most organized I've found and I want to use this one if possible. Can anyone help out with this?

P.S. I would be very grateful if anyone could also check my code for any tips/debugging. As you can see, I've used the part9.html tutorial as the bulk of the code (yes I'm that new). If anyone can give me some good straightforward tips, that would be GREATLY appreciated. I need help on making collisions and animations. Thanks. Also, I'm basing the demo project off of Mega Man Zero, so I would like to have some invisible collision blocks as to not interfere with the background/map. Thanks a lot.

<!doctype html>

<head>

<title>WeWork Game</title>

body {

margin: 0;

}

</style>

</head>

<body>

var game = new Phaser.Game(2000, 700, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

game.load.image('bg2', './background/base.png');

game.load.image('ground', './objects/energy.png');

game.load.image('stars', './objects/energy.png');

game.load.spritesheet('zero', './characters/zero.png', 561, 122);

}

var player;

var platform;

var cursors;

var stars;

var score = 0;

var scoreText;

function create() {

// We're going to be using physics, so enable the Arcade Physics system

game.physics.startSystem(Phaser.Physics.ARCADE);

// A simple background for our game

game.add.sprite(0, 0, 'bg2');

// The platform group contains the ground and the 2 ledges we can jump on

platform = game.add.group();

// We will enable physics for any object that is created in this group

platform.enableBody = true;

// Here we create the ground.

var ground = platform.create(0, game.world.height - 64, 'ground');

// Scale it to fit the width of the game (the original sprite is 400x32 in size)

ground.scale.setTo(2, 2);

// This stops it from falling away when you jump on it

ground.body.immovable = true;

// Now let's create two ledges

var ledge = platform.create(400, 400, 'ground');

ledge.body.immovable = true;

ledge = platform.create(-150, 250, 'ground');

ledge.body.immovable = true;

// The player and its settings

player = game.add.sprite(32, game.world.height - 150, 'zero');

// We need to enable physics on the player

game.physics.arcade.enable(player);

// Player physics properties. Give the little guy a slight bounce.

player.body.bounce.y = 0.2;

player.body.gravity.y = 300;

player.body.collideWorldBounds = true;

// Our two animations, walking left and right.

player.animations.add('left', [0, 1, 2, 3], 10, true);

player.animations.add('right', [5, 6, 7, 8], 10, true);

// Finally some stars to collect

stars = game.add.group();

// We will enable physics for any stars that is created in this group

stars.enableBody = true;

// Here we'll create 12 of them evenly spaced apart

for (var i = 0; i < 12; i++)

{

// Create a stars inside of the 'stars' group

var star = stars.create(i * 70, 0, 'stars');

// Let gravity do its thing

star.body.gravity.y = 300;

// This just gives each stars a slightly random bounce value

star.body.bounce.y = 0.7 + Math.random() * 0.2;

}

// The score

scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

// Our controls.

cursors = game.input.keyboard.createCursorKeys();

}

function update() {

// Collide the player and the stars with the platform

game.physics.arcade.collide(player, platform);

game.physics.arcade.collide(stars, platform);

// Checks to see if the player overlaps with any of the stars, if he does call the collectstars function

game.physics.arcade.overlap(player, stars, collectstars, null, this);

// Reset the players velocity (movement)

player.body.velocity.x = 0;

if (cursors.left.isDown)

{

// Move to the left

player.body.velocity.x = -150;

player.animations.play('left');

}

else if (cursors.right.isDown)

{

// Move to the right

player.body.velocity.x = 150;

player.animations.play('right');

}

else

{

// Stand still

player.animations.stop();

player.frame = 4;

}

// Allow the player to jump if they are touching the ground.

if (cursors.up.isDown && player.body.touching.down)

{

player.body.velocity.y = -350;

}

function collectstars (player, stars) {

// Removes the stars from the screen

stars.kill();

// Add and update the score

score += 10;

scoreText.text = 'Score: ' + score;

}

</script>

</body>

</html>

semk · July 22, 2015

Hey,

I had the same question, but dug a bit deeper and came across this post:
http://www.html5gamedevs.com/topic/7096-spritesheet-animation-question/

Basically, all the frames have to be the same size, so either use a program made to arrange the frames like TexturePacker, or

find the tallest and the widest frames, set all frames in the center of their own "box" that is the height and width of those maximum measurements.

that's it apparently, phaser will actually trim the excess 0 alpha pixels,

Hope that helps!

It's-The-Bat · July 22, 2015

Thanks a lot! I'll look into it and try to make some other adjustments. I've already tweaked around with the code and make some physics work as well as a moving character. The sprites were seriously bugging me. Thanks!

It's-The-Bat · July 22, 2015

Alright...I'm new at this. Can you help me more in depth on how/why to do this? I'd like to know this through a firsthand user rather than some tutorial because I've been searching and they barely explain much. Thanks. I'm stuck at the usage of this and if I should crop/modify the individual sprites.

semk · July 23, 2015

Here's one easy way without having to make equal boxes for every frame: use an atlas.

Atlas is like a Sprite, except along with the png file, there is also a json file that has information about where each sprite frame is located and how tall/wide it is.

I recommend using TexturePacker, you can get a hang of this with the trail first:

You'll need to slice up the sprite sheet, perhaps there's a way but I couldn't find one to use a sheet already, so slice it up.

This will mean you will have an image file for each frame of each animation, name them appropriately e.g.(zeroWalk0001.png, zeroWalk0002.png, ..etc zeroSlash0001.png... etc)

Open a new project in TexturePacker and select "Phaser (JSONArray)" as the type.

Now add all the image files into one project on TexturePacker, let TexturePacker arrange them by Best mode, and my personal preference is 0 in all areas for the sprite placement (extrude, trim, border padding, etc),

Then hit Publisher Sprite Sheet, and save your resulting png and json files.

Now in Phaser, to load your atlas do follow this tutorial:

http://nightlycoding.com/index.php/2015/01/phaser-io-how-to-use-atlashash-to-your-advantage/

And this documentation:

http://phaser.io/docs/2.3.0/Phaser.Animation.html#generateFrameNames

Sign In

Using a spreadsheet of many rows

Recommended Posts

It's-The-Bat

Link to comment

Share on other sites

semk

Link to comment

Share on other sites

It's-The-Bat

Link to comment

Share on other sites

It's-The-Bat

Link to comment

Share on other sites

semk

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity