snollygolly – Page 4 – Evil Mouse Studios

Roguelike Sprite Sheet

March 6, 2015 by snollygolly

Kenney makes absolutely amazing art, but one of my wishes for a while now was that he would make a roguelike sprite sheet. Well, he’s released a new donation pack, and it comes with an amazing 2125 sprites for a top down 2D roguelike!

Unfortunately, this sprite sheet doesn’t come with a data file (XML or JSON), which makes it difficult to use in some game engines. I took some code that I previously wrote for my Texture Atlas Converter and hacked it up to generate a JSON data file for this amazing sprite sheet.

The code is a little rough, but it gets the job done.

JSON Data File

PHP Code:


<?php

$ROWS = 43;
$COLS = 57;

$TILE_SIZE = 15;
$MARGIN_X = 2;
$MARGIN_Y = 2;


$total_sprites = $ROWS * $COLS;
$json = createJSONHash();
$filename = "Rogue.json";
logMsg("{$total_sprites} textures processed successfully");
file_put_contents($filename, json_encode($json, JSON_PRETTY_PRINT));
logMsg("Saved to {$filename}");

die();

function createJSONHash(){
  global $ROWS, $COLS, $TILE_SIZE, $MARGIN_X, $MARGIN_Y;
  $total_sprites = $ROWS * $COLS;
  $x = 0;
  $y = 0;
  $json = new stdClass();
  //build out the frames obj (contains all the images)
  $json->frames = new stdClass();
  //build out the meta object (just info about this program)
  $json->meta = new stdClass();
  //loop through all subtextures
  $i = 0;
  while ($i < $total_sprites){
    $tile_name = "t_" . $i;
    //make the right object, JSON arr would differ here
    $json->frames->{$tile_name} = new stdClass();
    //get coords
    //var x = ((i % MAP_WIDTH) * TILE_SIZE) + LEFT_OFFSET;
    $x = ($i % $COLS) * ($TILE_SIZE + $MARGIN_X);
    //var y = (Math.floor(i / MAP_WIDTH) * TILE_SIZE) + TOP_OFFSET;
    $y = floor($i / $COLS) * ($TILE_SIZE + $MARGIN_Y);
    //make the frame object
    $frame_obj = new stdClass();
    $frame_obj->x = $x;
    $frame_obj->y = $y;
    $frame_obj->w = $TILE_SIZE;
    $frame_obj->h = $TILE_SIZE;
    //set the frame object
    $json->frames->{$tile_name}->frame = $frame_obj;

    //make the sprite source object
    $sprite_obj = new stdClass();
    $sprite_obj->x = 0;
    $sprite_obj->y = 0;
    $sprite_obj->w = $TILE_SIZE;
    $sprite_obj->h = $TILE_SIZE;
    //set the sprite source object
    $json->frames->{$tile_name}->spriteSourceSize = $sprite_obj;

    //make the source size object
    $source_obj = new stdClass();
    $source_obj->w = $TILE_SIZE;
    $source_obj->h = $TILE_SIZE;
    //set the sprite source object
    $json->frames->{$tile_name}->sourceSize = $source_obj;

    //add some more stuff that may or may not matter
    $json->frames->{$tile_name}->rotated = false;
    $json->frames->{$tile_name}->trimmed = false;

    //make the pivot object
    $pivot_obj = new stdClass();
    $pivot_obj->x = 0.5;
    $pivot_obj->y = 0.5;
    $json->frames->{$tile_name}->rotated = false;
    $i++;
  }
  $json->meta->sprites = $i;
  $json->meta->image = "roguelikeSheet_transparent.png";
  logMsg("The sprite sheet should be these dimensions - w:" . ($x + $TILE_SIZE) . " h:" . ($y + $TILE_SIZE));
  return $json;
}

function logMsg ($message){
  echo "{$message}\n";
}
?>

<?php

$ROWS = 43;

$COLS = 57;

$TILE_SIZE = 15;

$MARGIN_X = 2;

$MARGIN_Y = 2;

$total_sprites = $ROWS * $COLS;

$json = createJSONHash();

$filename = "Rogue.json";

logMsg("{$total_sprites} textures processed successfully");

file_put_contents($filename, json_encode($json, JSON_PRETTY_PRINT));

logMsg("Saved to {$filename}");

die();

function createJSONHash(){

global $ROWS, $COLS, $TILE_SIZE, $MARGIN_X, $MARGIN_Y;

$total_sprites = $ROWS * $COLS;

$x = 0;

$y = 0;

$json = new stdClass();

//build out the frames obj (contains all the images)

$json->frames = new stdClass();

//build out the meta object (just info about this program)

$json->meta = new stdClass();

//loop through all subtextures

$i = 0;

while ($i < $total_sprites){

$tile_name = "t_" . $i;

//make the right object, JSON arr would differ here

$json->frames->{$tile_name} = new stdClass();

//get coords

//var x = ((i % MAP_WIDTH) * TILE_SIZE) + LEFT_OFFSET;

$x = ($i % $COLS) * ($TILE_SIZE + $MARGIN_X);

//var y = (Math.floor(i / MAP_WIDTH) * TILE_SIZE) + TOP_OFFSET;

$y = floor($i / $COLS) * ($TILE_SIZE + $MARGIN_Y);

//make the frame object

$frame_obj = new stdClass();

$frame_obj->x = $x;

$frame_obj->y = $y;

$frame_obj->w = $TILE_SIZE;

$frame_obj->h = $TILE_SIZE;

//set the frame object

$json->frames->{$tile_name}->frame = $frame_obj;

//make the sprite source object

$sprite_obj = new stdClass();

$sprite_obj->x = 0;

$sprite_obj->y = 0;

$sprite_obj->w = $TILE_SIZE;

$sprite_obj->h = $TILE_SIZE;

//set the sprite source object

$json->frames->{$tile_name}->spriteSourceSize = $sprite_obj;

//make the source size object

$source_obj = new stdClass();

$source_obj->w = $TILE_SIZE;

$source_obj->h = $TILE_SIZE;

//set the sprite source object

$json->frames->{$tile_name}->sourceSize = $source_obj;

//add some more stuff that may or may not matter

$json->frames->{$tile_name}->rotated = false;

$json->frames->{$tile_name}->trimmed = false;

//make the pivot object

$pivot_obj = new stdClass();

$pivot_obj->x = 0.5;

$pivot_obj->y = 0.5;

$json->frames->{$tile_name}->rotated = false;

$i++;

}

$json->meta->sprites = $i;

$json->meta->image = "roguelikeSheet_transparent.png";

logMsg("The sprite sheet should be these dimensions - w:" . ($x + $TILE_SIZE) . " h:" . ($y + $TILE_SIZE));

return $json;

}

function logMsg ($message){

echo "{$message}\n";

}

Half Gallon Hat

February 25, 2015 by snollygolly

I’ve been trying out a new rendering engine written in Javascript called pixi.js. It’s supposed to be the fastest one around, and while I can’t tell you if it is or not, I can tell you it’s certainly very cool. It has some neat features like auto-detecting WebGL support, and failing over to canvas support if the device doesn’t support WebGL.


Engine.renderer = new PIXI.autoDetectRenderer(Engine.WIDTH, Engine.HEIGHT);
document.body.appendChild(Engine.renderer.view);

Engine.renderer = new PIXI.autoDetectRenderer(Engine.WIDTH, Engine.HEIGHT);

document.body.appendChild(Engine.renderer.view);

One of the first things I tried to build with pixi.js is a hobby project a friend and I are working on called “Half Gallon Hat”. It’s sort of a western themed typing game. We’re still working on art, animation, and a ton of polish, but I think it’s pretty promising that I could implement the core game mechanics in only a few hours. Feel free to check it out and test out your typing skills.

Half Gallon Hat

Also, I’m working on separating the game code from the rendering/management code. I hope to have an engine.js file ready to put on GitHub in the future to make game development with pixi.js a little easier for others. I’ll post here once I’m ready to commit it.

Texture Atlas Converter

February 24, 2015 by snollygolly

As a programmer, it’s always really difficult for me to find high quality art to use in games. Too often there’s not enough of a consistent style, or it’s not cheap enough to use for a hobby project. Finding Kenney.nl was an absolute life saver for me. He has thousands of royalty free assets you can use in your games. You can even use them for commercial projects!

His art is really amazing, but unfortunately his sprite sheets don’t come with JSON files. They come with XML, but several JS game engines (like pixi.js) don’t accept XML files, they only accept JSON.

To solve this problem, I wrote a small PHP script that converts XML files to JSON files for use with game engines.

Take a look at it on my GitHub, and pull requests are always welcome.

https://github.com/snollygolly/TextureAtlasConverter

Bloodhound

January 25, 2015 by snollygolly

So I’m really into TV. I watch dozens of shows at any one time, but since I’m constantly hopping around shows, I have a hard time remember which episode I stopped at. Also, when shows stop for the end of the season or a mid-season break, I never know when they are supposed to come back on again.

I made Bloodhound to fix this problem. It’s currently in very early stages of development, but already I find it very useful. It will let me track as many shows as I want, pull information from multiple sources, and make sure that I know what is next to watch. The source code on GitHub can be found at the link above, and a live hosted demo can be found at Bloodhound.tv.

Let me know what you think, and if you want to improve on it, please send a pull request.

So Maze

January 27, 2014 by snollygolly

So I had the idea to make a game to help support the Dogecoin cryptocurrency. I wanted it to be multiplayer, but not the type of multiplayer where both players need to be online at the same time. What I came up with was So Maze. It’s essentially a mix between Minesweeper, Stratego, and a maze. I think it’s a really interesting type of asynchronous gameplay, and it’s one that I hope to explore further in the future.

Check out my Twitter for more screenshots like the one below of what the game is like and to see my progress.

Check it out on GitHub, and feel free to submit a pull request if you’d like to improve on it.

https://github.com/snollygolly/SoMaze

Software Development With A Mind Of Its Own

Author: snollygolly

Roguelike Sprite Sheet

Half Gallon Hat

Texture Atlas Converter

Bloodhound

So Maze