Creating a Spritesheet with three.js

hassan shaikley
1 min readDec 11, 2023

Hopefully this saves people some time!

This is using the pixi.js spritesheet format but it shouldn’t be difficult to make it work with whatever spritesheet/sprite atlas format.

One improvement might be to return a promise and resolve it.

import {
TextureLoader,
SpriteMaterial,
Sprite,
NearestFilter,
} from 'three';
import { Character } from './character';

import ss from './spritesheet.png';
import ssData from './spritesheet-data.json';
import { StartingRoom } from './starting-room';

const SPRITESHEET_BLOCK_WIDTH = 25;
const SPRITESHEET_BLOCK_HEIGHT = 25;

export class TextureAtlas {
spritesheet: any;
spritesheetData: any;
xStep: number;
yStep: number;
constructor(onload) {
const loader = new TextureLoader();
loader.load(
ss,
spritesheet => {
this.spritesheetData = {};

spritesheet.horizontalTiles = ssData.meta.size.w / SPRITESHEET_BLOCK_WIDTH;
spritesheet.verticleTiles = ssData.meta.size.h / SPRITESHEET_BLOCK_HEIGHT;

Object.keys(ssData.frames).forEach(frame => {
this.spritesheetData[frame] = {
x: ssData.frames[frame].frame.x,
y: ssData.frames[frame].frame.y,
w: ssData.frames[frame].frame.w,
h: ssData.frames[frame].frame.h,
};
});

spritesheet.magFilter = NearestFilter;

this.spritesheet = spritesheet;

this.xStep = 1 / this.spritesheet.horizontalTiles;
this.yStep = 1 / this.spritesheet.verticleTiles;

this.spritesheet.repeat.set(this.xStep, this.yStep);

onload();
},

// onError callback
err => {
console.error('An error happened.');
}
);
}
setOffset(name) {
const sdata = this.spritesheetData[name];

this.spritesheet.offset.x = (sdata.x % this.spritesheet.image.width) / this.spritesheet.image.width;
this.spritesheet.offset.y = 1 - (sdata.y % this.spritesheet.image.height) / this.spritesheet.image.height - this.yStep;
}
}

// usage

textureAtlas.setOffset('spritename.png');
const material = new SpriteMaterial({ map: textureAtlas.spritesheet.clone() });
const sprite = new Sprite(material);
scene.add(sprite);

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

hassan shaikley
hassan shaikley

No responses yet

Write a response