JoyPixels Labs

version 6.5

JoyPixels PNG Sprites

🍒 :) :coffee: :( :fire: 🍔

We've setup a collection of spritesheets for people to use. These sprites are split by category (plus diversity) and come in 32px and 64px sizes.

Some Considerations

1. Attach Sprite CSS Stylesheet:

To get PNG sprites working you first need to link the Sprites stylesheet in your <head>. This file is available in our git repo under /assets/sprites. Make sure to include the accompanying joypixels.sprites.png file in the same directory, or update its path in the css file if you move it.

<link rel="stylesheet" href="path/to/joypixels.sprites.css"/>

2. Enable PNG Sprite mode

Once the stylesheet is attached, it's just a matter of enabling PNG Sprites in your JoyPixels configuration

Javascript Example

joypixels.imageType = 'png';
joypixels.sprites = true;

PHP Example

$client = new Client(new Ruleset());
$client->imageType = 'png';
$client->sprites = true;

If you are not using our conversion scripts, PNG sprites can be implemented using the following markup structure. In this example we're using the unicode symbol 1F433 aka 🐳

<span class="joypixels joypixels-32-nature _1f433">