sprite sheets, sprites and more sprites

rootuid

Hi, I'm a beginner and am trying to use sprite sheets using the play library.

What I would like to do is:

• use specific sprite frames eg: frame 5-10. loadSpriteSheet only allows me to specify the number of frames, not a range.
• move the sprite on the x and y axis.

Any pointers please ? Thanks.

Ps. Why doesn't ``` encapsulated the code in a code block ?

My super basic code looks like this

javascript
var player;
var ball;

function preload() {
  player = loadSpriteSheet('images/player.png', 32, 32, 10);
  ball = loadSpriteSheet('images/ball.png', 16, 16, 10);

  playerAnimation = loadAnimation(player);
  ballAnimation = loadAnimation(ball);

}

function setup() {
  createCanvas(800, 225);
}


function draw() {
  clear();
  background(0,160,0);  

  animation(playerAnimation, 100, 130);
  animation(ballAnimation, 200, 130);
}

quark

The single apostrophe is used to surround a single line of code. For multiple lines make sure there is a blank line in front of and behind the code block, hightlight the code and press Ctrl O or click on the C button. I have corrected your initial comment.

rootuid

Thanks for that quark!

GoToLoop

Triple apostrophe ``` is GitHub's markdown syntax. But it doesn't work here unfortunately. :|
Besides indenting a code section w/ 4 spaces, there's also <pre lang=your_language> tag.

Jared_Sprague

Hey rootuid! Yes you can do what you want with p5.play spritesheets using a sprite sheet data in json.

There are two ways to use sprite sheets in p5.play:

1. The simple way you described, where you specify the width and height of each frame and how many frames there are.

2. You can define each frame in json, the x,y of the top left corner of each frame and each frame's width and height. That gives you full control over the frames in your sprite sheet animation. You can define just frames in any the middle of a larger sheet if you want.

See the example here which demonstrates both methods: http://p5play.molleindustria.org/examples/index.html?fileName=sprites_with_sheet.js