Whimsical Creatures

Myre & Milton

!++

I let Christoffer be the ++ on the blog. He wrote one post. And then nothing...
So now I have to do something. And so I have. I've made a draft for the graphics for his game.

The style reminds me of drop7 right now but maybe it will get a life of it's own.

New Friends?

I'm a bit jetlagged still from our trip to IndieCade with Copenhagen Game Collective. So this is all I have to share for now - a few new friends.

Sprite Shiit

As I wrote last I've gotten the sprite animation somewhat working and I've even found a good way of making the sprite sheet. But I still haven't found the trick to getting the quality of the images right :(

So to start with the quality seems fine almost anyway as you can see here:

But after a while of running the application the graphics get blurred as you can see in this second screenshot. I have no idea why.

If anyone out there has an idea as to what I'm doing wrong then please comment.

It Moves!

I've got the code for animating sprite sheets working. I had made the mistake of setting a variable as a float instead of an integer. In human lingo this mean I was working with a decimal number where I was supposed to use a "whole" number. I took me a while to figure this out, but by now at least I understand the code I borrowed a lot better.

I changed this:
float index = Time.time*fps;
to this:
int index = (int)(Time.time*fps);

Current screenshot of application:

Everything looks a mess. I'm trying to figure out why my graphics gets pixelated now that I've change to Unity3 and while doing so I've piled graphics in different resolutions.

Talking of Unity3 the mysterious icon issue has been fixed and it's now super easy to add an icon picture under the player settings and best of all - it works!

Damn, Smooth Sliding

Rewriting the code the sprite sheet animation from java script to C# has given me some problems I didn't anticipate. The code simply appears to work differently in C# than in java script. I have two videos that illustrate the difference.

This video shows the right animation but the code is in java script:

Here the similar code is rewritten in C# as you will see the sprite sheet just slides at an angle instead of jumping picture by picture:

Here's the original java script code:

//vars for the whole sheet
var colCount    : int =  4;
var rowCount    : int =  1;


//vars for animation
var rowNumber   : int =  0; //Zero Indexed
var colNumber   : int =  0; //Zero Indexed
var totalCells  : int =  4;
var fps  : int = 10;
var offset  : Vector2;  //Maybe this should be a private var


//Update
function Update () { SetSpriteAnimation(colCount,rowCount,rowNumber,colNumber,totalCells,fps);  }


//SetSpriteAnimation
function SetSpriteAnimation(colCount : int,rowCount : int,rowNumber : int,colNumber : int,totalCells : int,fps : int){


    // Calculate index
    var index : int = Time.time * fps;
    // Repeat when exhausting all cells
    index = index % totalCells;
    
    // Size of every cell
    var size = Vector2 (1.0 / colCount, 1.0 / rowCount);
    
    // split into horizontal and vertical index
    var uIndex = index % colCount;
    var vIndex = index / colCount;

    // build offset
    // v coordinate is the bottom of the image in opengl so we need to invert.
    offset = Vector2 ((uIndex+colNumber) * size.x, (1.0 - size.y) - (vIndex+rowNumber) * size.y);
    
    renderer.material.SetTextureOffset ("_MainTex", offset);
    renderer.material.SetTextureScale  ("_MainTex", size);
}


And the code in my C# version:

using UnityEngine;
using System.Collections;


public class Animation_sprite_sheet : MonoBehaviour {
//vars for the whole sheet
public int colCount =  4;
public int rowCount =  1;

//vars for animation
public int rowNumber = 0; //Zero Indexed
public int colNumber = 0; //Zero Indexed
public int totalCells = 4;
public int fps = 10;
Vector2 offset;  //Maybe this should be a private var


// Use this for initialization
void Start () {
}

// Update is called once per frame
void Update () {
SetSpriteAnimation(colCount,rowCount,rowNumber,colNumber,totalCells,fps);
}
//SetSpriteAnimation
public void SetSpriteAnimation( int colCount, int rowCount, int rowNumber, int colNumber, int totalCells, int fps){
// Calculate index
     float index = Time.time * fps;
    
// Repeat when exhausting all cells
     index = index % totalCells;
    
   // Size of every cell
     Vector2 size = new Vector2 ((1.0f / colCount), (1.0f / rowCount));
    
     // split into horizontal and vertical index
   float uIndex = index % colCount;
     float vIndex = index / colCount;

     // build offset
     // v coordinate is the bottom of the image in opengl so we need to invert.
     Vector2 offset = new Vector2 ((uIndex+colNumber) * size.x, ((1.0f - size.y) - (vIndex+rowNumber) * size.y));
    
     renderer.material.SetTextureOffset ("_MainTex", offset);
     renderer.material.SetTextureScale  ("_MainTex", size);
}
}

As all the examples I can find in unity's documentation and around the internet on unity are mostly in java script I often find myself being lost when it comes to using C# in unity.

Power of Two

I'm slowly starting to figure out how I can add graphics to the game. Basically I'm getting tired of the green, red and blue squares. So now I'll go for red, yellow(!) and green blinking circles instead.

I'll be working with sprite sheets for the animation. So far I've managed to get a clumsy animation running on the iPad by using a piece of java script I borrowed from the Unity community wiki. But I want to work in C# so now I have to rewrite it.

Oh and the "power of two"-title refers to the fact that in order to get nice graphics on the iPad I have to remember to use image sizes that are a power of two e.g. 256 x 1024.

float progress = 0;

No progress today. I guess I tried to study. I was looking for tutorials on animating with sprite sheets something that would give me a good work method for vector animation. I didn't find anything useful. Mostly forum posts about how to convert a 3d animation to sprite sheets and often with very limited info. If I find a good method by myself then I guess I should write it down.

I did find one post at angryanimator.com on animation in general which is nice. Not what I was looking for but still worth a look. Especially the links to “How to Animate” by Preston Blair volume 1 and volume 2 are great. One of the comments mentions the book Character Animation Crash Course! maybe I should find a copy.

Also, I looked a bit at the code but I guess I wasn't in the zone.

Screaming kids

The working title in my head for the game is Kindergarten Calamity. Looking at the sketches of the game characters you may understand why.


I haven't made any final decisions on the style of game. These drawings are simply my initial ideas.