Jump to content

Using a spreadsheet of many rows


Recommended Posts

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> 
<html lang="en"> 
<meta charset="UTF-8" />
    <title>WeWork Game</title>
    <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
<script type="text/javascript">
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
    //  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
    //  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;
    else if (cursors.right.isDown)
        //  Move to the right
        player.body.velocity.x = 150;
        //  Stand still
        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
    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;


Link to comment
Share on other sites



I had the same question, but dug a bit deeper and came across this post:


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! 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:


And this documentation:


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...