2D Archives - "Where to now?"

Category2D

Unity: Rescaling Fonts

February 3, 2014 / Jan Rabe / 3 Comments

Hey guys, I’m doing some unity stuff. So far it’s great, however I still have some difficulties about scaling towards respective resolutions for mobile devices.

In general: I appreciate every suggestion!

So far I came across:

GUI.DrawTexture(new Rect (0, 0, Screen.width, Screen.height), texture, ScaleMode.ScaleAndCrop);

1	GUI.DrawTexture(new Rect (0, 0, Screen.width, Screen.height), texture, ScaleMode.ScaleAndCrop);

for scaling simple 2D textures. And a little script for rescaling fonts:

public class RescaleFonts : MonoBehaviour {
	
	private float _oldWidth;
	private float _oldHeight;
	private float _fontSize = 16;
	public float EffectiveFontSizePercent = 0.1f; // value between 0 and 1

	void Update () {
		if (_oldWidth != Screen.width || _oldHeight != Screen.height) {
			_oldWidth = Screen.width;
			_oldHeight = Screen.height;
			_fontSize =  Mathf.Min (Screen.width, Screen.height) * EffectiveFontSizePercent;
			guiText.fontSize = (int) _fontSize;
		}
	}
}

public class RescaleFonts : MonoBehaviour {

private float _oldWidth;

private float _oldHeight;

private float _fontSize = 16;

public float EffectiveFontSizePercent = 0.1f; // value between 0 and 1

void Update () {

if (_oldWidth != Screen.width || _oldHeight != Screen.height) {

_oldWidth = Screen.width;

_oldHeight = Screen.height;

_fontSize = Mathf.Min (Screen.width, Screen.height) * EffectiveFontSizePercent;

guiText.fontSize = (int) _fontSize;

}

Where you add this script to a label or something and change its effective font size. So it will at least look a like amongst multiple devices. It scales all right but it doesn’t feel too reliable yet. Any suggestions?

How do you guys handle your ui sizes with unity?

Resizing and reducing color palette of images with command-line

December 19, 2013 / Jan Rabe / 2 Comments

Often you want to batch your assets and prepare them for multiresolutions. One way great way to do it, is by using ImageMagick. It has A LOT of features to manipulate images and since it’s command line, you can just append all commands into a batch/shell script to automate it. For instance resizing all images to half just use this simple command:

/imagemagick/mogrify -resize 50% -quality 100 /images/*.png

1	/imagemagick/mogrify -resize 50% -quality 100 /images/*.png

Another awesome tool is called pngquant. Which actually reduces 24/32 bit images to 8 bit palette pngs WIDTH keeping full transparency, no idea how, but it works and is a default too to be used as best practice. Here an example for 32 colors:

/compress_pngs/pngquant --verbose --speed 1 --force --ext .png 32 /images/*.png

1	/compress_pngs/pngquant --verbose --speed 1 --force --ext .png 32 /images/*.png

Conclusion

When it comes to handing massive collections of images for multiresolution it’s always a good idea to automate as much as possible.

Texture Packer

September 7, 2013 / Jan Rabe / 2 Comments

When it comes to optimizing graphic assets you want to use texture atlasses (aka sprite-sheets). Since you can have multiple images in one and therefore have less seperated files to open and load one by one and creating expensive textures into your graphic memory. For instance 95 seperate images or one sprite sheet makes a huge difference:

When you want to create sprite-sheets there’s one really awesome tool called Texture Packer.

Which basically creates them by dragging and dropping them into a scene optionally re-orderes, compresses and creates a file with all the offsets for it with like 3 clicks.

At work we’re using it for some time already and I can highly recommend it.

By the way there is one similar cool tool for css sprite sheets called Sprite Cow. :)

Thinking out of the box

June 2, 2013 / Jan Rabe / 0 Comments

Today I’ve stumbled upon two highly inspiring talks. The first one I want to recommend is Media for Thinking the Unthinkable by Bret Victor.

He talks about re-thinking the way we think about systems. The take away for me was in order to understand systems better and easier in general is to visualize its behaviour under multiple perspectives. Also I like the following inspiring quote:

“Just as there are odors that dogs can smell and we cannot, as well as sounds that dogs can hear and we cannot, so too there are wavelengths of light we cannot see and flavors we cannot taste. Why then, given our brains wired the way they are, does the remark, “Perhaps there are thoughts we cannot think,” surprise you?” by Richard Hamming

The second talk is Designing Journey by Jenova Chen (video). Where Jenova introduces a new kind of way to interact with people online at the GDC 2013. His approach is to reduce every noise that would ultimately lead to toxically hating, exploiting and mistrusting your fellow players which is sort of a counterproductive and an unhealthy gameplay overall.

GDC overview: “It took thatgamecompany three years to develop a two-hour long video game. Many high-level experimental ideas were tested and failed, and many lessons were learned during the design and production of the game. 12 months have passed since the game was launched, and we would like to share what we learned with you. This talk will give you the insight into the process thatgamecompany took to come up the original concept for Journey, how we polished and executed the design to realize an emotional arc, and most importantly, the difficult lessons we learned throughout the process.”

Here is gameplay video where a player wanders around and meeting up with a stranger in order to interactivly play walk together.

The takeaway for me is that playing together with other people can actually leave you behind with a very welcoming and healthy feeling if a game is actually designed for social interaction.

How to boost android canvas performance with a buffered Image

January 7, 2013 / Jan Rabe / 2 Comments

When it comes to drawing to canvas on android one very big performance boost can be gained by using a buffered bitmap image. The idea is to draw lines to a bitmap. And then draw the bitmap to the screen.
This approach avoids unnecessarily redrawing elements that has been drawn already multiple times.

1) Create a bitmap in your view.

public View(Activity activity) {
    super(activity);
    DisplayMetrics metrics = new DisplayMetrics();
    activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
    bufferedImage = Bitmap.createBitmap(metrics.widthPixels, metrics.heightPixels, Bitmap.Config.ARGB_8888);
    .
    .
    .
}

public View(Activity activity) {

super(activity);

DisplayMetrics metrics = new DisplayMetrics();

activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);

bufferedImage = Bitmap.createBitmap(metrics.widthPixels, metrics.heightPixels, Bitmap.Config.ARGB_8888);

}

2) Remember all touch events.

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    int action = motionEvent.getAction();
    Point point = new Point(motionEvent.getX(), motionEvent.getY());
    switch (action) {
        case MotionEvent.ACTION_DOWN: // touch down
            linePathManager.startLine(point);
            break;
        case MotionEvent.ACTION_MOVE:  // touch drag
            linePathManager.addPoint(point);
            break;
        case MotionEvent.ACTION_UP: // stop touching
            linePathManager.endLine();
            break;
    }
    invalidate();
    return super.onTouchEvent(motionEvent);
}

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

int action = motionEvent.getAction();

Point point = new Point(motionEvent.getX(), motionEvent.getY());

switch (action) {

case MotionEvent.ACTION_DOWN: // touch down

linePathManager.startLine(point);

break;

case MotionEvent.ACTION_MOVE: // touch drag

linePathManager.addPoint(point);

break;

case MotionEvent.ACTION_UP: // stop touching

linePathManager.endLine();

break;

}

invalidate();

return super.onTouchEvent(motionEvent);

}

3) Process all touch events. (Draw lines or something)

private Path path = new Path();

public void startLine(@NotNull Point point) {
    path.moveTo(point.x, point.y);
}
 
public void add(@NotNull Point p) {
    path.lineTo(p.x, p.y);
    path.moveTo(p.x, p.y);
}

public void close() {
    path.close();
}

private Path path = new Path();

public void startLine(@NotNull Point point) {

path.moveTo(point.x, point.y);

}

public void add(@NotNull Point p) {

path.lineTo(p.x, p.y);

path.moveTo(p.x, p.y);

}

public void close() {

path.close();

}

4) Draw to buffered bitmap image.

lineManager.draw():

private Canvas canvas = new Canvas();

public void draw(Bitmap bitmap, Paint paint) {
    canvas.setBitmap(bitmap);
    canvas.drawPath(path, paint);
}

private Canvas canvas = new Canvas();

public void draw(Bitmap bitmap, Paint paint) {

canvas.setBitmap(bitmap);

canvas.drawPath(path, paint);

}

5) And finally draw the buffered bitmap image.

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    linePathManager.draw(bufferedImage, paint);
    canvas.drawBitmap(bufferedImage, 0, 0, paint);
}

@Override

public void onDraw(Canvas canvas) {

super.onDraw(canvas);

linePathManager.draw(bufferedImage, paint);

canvas.drawBitmap(bufferedImage, 0, 0, paint);

}

Bonus: invalidate canvas only around finger area and only every 90 milliseconds.

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    int action = motionEvent.getAction();

    Point point = new Point(motionEvent.getX(), motionEvent.getY());
    switch (action) {
        case MotionEvent.ACTION_DOWN: // touch down
            linePathManager.startLine(point);
            break;
        case MotionEvent.ACTION_MOVE:  // touch drag
            linePathManager.addPoint(point);
            break;
        case MotionEvent.ACTION_UP:
            linePathManager.endLine();
            break;
    }

    // invalidate only finger area
    if (Calendar.getInstance().getTimeInMillis() - startTime > 90) {
        int rectangleSize = (int) (100 * metric.density);
        invalidate((int) (point.x - rectangleSize / 1.5), (int) (point.y - rectangleSize / 1.5), (int) point.x + rectangleSize, (int) point.y + rectangleSize);
        startTime = Calendar.getInstance().getTimeInMillis();
    }
    return true;
}

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

int action = motionEvent.getAction();

Point point = new Point(motionEvent.getX(), motionEvent.getY());

switch (action) {

case MotionEvent.ACTION_DOWN: // touch down

linePathManager.startLine(point);

break;

case MotionEvent.ACTION_MOVE: // touch drag

linePathManager.addPoint(point);

break;

case MotionEvent.ACTION_UP:

linePathManager.endLine();

break;

}

// invalidate only finger area

if (Calendar.getInstance().getTimeInMillis() - startTime > 90) {

int rectangleSize = (int) (100 * metric.density);

invalidate((int) (point.x - rectangleSize / 1.5), (int) (point.y - rectangleSize / 1.5), (int) point.x + rectangleSize, (int) point.y + rectangleSize);

startTime = Calendar.getInstance().getTimeInMillis();

}

return true;

}

Doodle Drawer – Brushes

January 7, 2013 / Jan Rabe / 0 Comments

At my Doodle Drawer app, I’ve played with a couple of “brushes”. The idea is to treat the connection lines differently.

shaded

sketched

fur

Basically the difference is that the line connections are drawn closer or further away from each line based on the formula of Harmony.

The ‘shaded brush’ looks like this:

@Override
    public void addConnections(Point nextPoint, int color, float strokeWidth) {
        ArrayList<Point> points = PointsList.points;
        for (int i = 0; i < points.size(); ++i) {
            Point curPoint = points.get(i);
            float b = curPoint.x - nextPoint.x;
            float a = curPoint.y - nextPoint.y;
            float distance = b * b + a * a;
            if (distance < 2000f * Config.DEVICE_DISPLAY_METRICS.density) {
                int alpha =  255-((int) (225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density * distance));
                int newColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
                LineList.connections.add(new Line(nextPoint, curPoint, newColor, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));
            }
        }
    }

@Override

public void addConnections(Point nextPoint, int color, float strokeWidth) {

ArrayList<Point> points = PointsList.points;

for (int i = 0; i < points.size(); ++i) {

Point curPoint = points.get(i);

float b = curPoint.x - nextPoint.x;

float a = curPoint.y - nextPoint.y;

float distance = b * b + a * a;

if (distance < 2000f * Config.DEVICE_DISPLAY_METRICS.density) {

int alpha = 255-((int) (225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density * distance));

int newColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));

LineList.connections.add(new Line(nextPoint, curPoint, newColor, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));

}

The sketched brush looks like this:

    @Override
    public void addConnections(Point nextPoint, int color, float strokeWidth) {
        ArrayList points = PointsList.points;
        for (int i = 0; i &lt; points.size(); ++i) {
            Point curPoint = points.get(i);
            float b = curPoint.x - nextPoint.x;
            float a = curPoint.y - nextPoint.y;
            float distance = b * b + a * a;
            if (distance &lt; 10000 * Config.DEVICE_DISPLAY_METRICS.density &amp;&amp; Math.random() &gt; (distance / 10000 * Config.DEVICE_DISPLAY_METRICS.density)) {
                int alpha = 255 - ((int) ((225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density) * distance));
                int newColor =  Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
                final float c = 0.2f;
                LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(curPoint.x - (b * c), curPoint.y - (a * c)),newColor, strokeWidth * 0.5f * Config.BRUSH_PRESSURE));
            }
        }
    }

@Override

public void addConnections(Point nextPoint, int color, float strokeWidth) {

ArrayList points = PointsList.points;

for (int i = 0; i < points.size(); ++i) {

Point curPoint = points.get(i);

float b = curPoint.x - nextPoint.x;

float a = curPoint.y - nextPoint.y;

float distance = b * b + a * a;

if (distance < 10000 * Config.DEVICE_DISPLAY_METRICS.density && Math.random() > (distance / 10000 * Config.DEVICE_DISPLAY_METRICS.density)) {

int alpha = 255 - ((int) ((225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density) * distance));

int newColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));

final float c = 0.2f;

LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(curPoint.x - (b * c), curPoint.y - (a * c)),newColor, strokeWidth * 0.5f * Config.BRUSH_PRESSURE));

}

And the ‘fur brush’ looks like this:

    @Override
    public void addConnections(Point nextPoint, int color, float strokeWidth) {
        ArrayList points = PointsList.points;
        for (int i = 0; i &lt; points.size(); ++i) {
            Point curPoint = points.get(i);
            float b = curPoint.x - nextPoint.x;
            float a = curPoint.y - nextPoint.y;
            float distance = b * b + a * a;
            if (distance &lt; 4000f * Config.DEVICE_DISPLAY_METRICS.density &amp;&amp; Math.random() &gt; distance / 4000f * Config.DEVICE_DISPLAY_METRICS.density) {
                final float c = 0.5f;
                LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(nextPoint.x - (b * c), nextPoint.y - (a * c)), color, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));
            }
        }
    }

@Override

public void addConnections(Point nextPoint, int color, float strokeWidth) {

ArrayList points = PointsList.points;

for (int i = 0; i < points.size(); ++i) {

Point curPoint = points.get(i);

float b = curPoint.x - nextPoint.x;

float a = curPoint.y - nextPoint.y;

float distance = b * b + a * a;

if (distance < 4000f * Config.DEVICE_DISPLAY_METRICS.density && Math.random() > distance / 4000f * Config.DEVICE_DISPLAY_METRICS.density) {

final float c = 0.5f;

LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(nextPoint.x - (b * c), nextPoint.y - (a * c)), color, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));

}

Parametric Curves and deCasteljau Bezier Curves

December 29, 2012 / Jan Rabe / 2 Comments

Cubic Bezier Curves – Under the Hood from Peter Nowell on Vimeo.

You can drag the markers and open this example in new tab.

The core part of this practise clearly is the bezier curve. To get all points on the curve for 4 control points this would suffice.

/**
 * Computes deCasteljau p(t) for 4 control points.
 * 
 * @param t - portion on the graph, value between 0.0 and 1.0
 * @param cP - 4 control points [x,y]
 * @return point[x,y] - p(t)
 */
this.deCasteljau = function (t, cP) {
    return (1 - t) * (1 - t) * (1 - t) * cP[0][1]
        + 3 * (1 - t) * (1 - t) * t * cP[1][1]
        + 3 * (1 - t) * t * t * cP[2][1]
        + t * t * t * cP[3][1];
};

/**

* Computes deCasteljau p(t) for 4 control points.

* @param t - portion on the graph, value between 0.0 and 1.0

* @param cP - 4 control points [x,y]

* @return point[x,y] - p(t)

this.deCasteljau = function (t, cP) {

return (1 - t) * (1 - t) * (1 - t) * cP[0][1]

+ 3 * (1 - t) * (1 - t) * t * cP[1][1]

+ 3 * (1 - t) * t * t * cP[2][1]

+ t * t * t * cP[3][1];

};

However in order to use an arbitary amount of control points I use the following function. It’s recursively, so potentially it’ll explode the max available stack depth (no clue how much that is in js). But for now it’ll do the job.

/**
 * Computes deCasteljau p(t) for n-control points 
 *
 * @param cp - list of control points [][x,y]
 * @param r - amount points (init value : points.length-1)
 * @param i - start value (init value : 0)
 * @param t - portion on the graph (range between 0.0 and 1.0)
 *
 * @see http://stackoverflow.com/a/6271870 for n-control points
 *
 * @return point[x,y] - point on graph at p(t) 
 */
this.deCasteljau = function (cp, r, i, t) {
    if (r == 0) return cp[i];
    var p1 = this.deCasteljau(cp,r - 1, i, t);
    var p2 = this.deCasteljau(cp,r - 1, i + 1, t);
    return [(1 - t) * p1[0] + t * p2[0], (1 - t) * p1[1] + t * p2[1]];
};

/**

* Computes deCasteljau p(t) for n-control points

* @param cp - list of control points [][x,y]

* @param r - amount points (init value : points.length-1)

* @param i - start value (init value : 0)

* @param t - portion on the graph (range between 0.0 and 1.0)

* @see http://stackoverflow.com/a/6271870 for n-control points

* @return point[x,y] - point on graph at p(t)

this.deCasteljau = function (cp, r, i, t) {

if (r == 0) return cp[i];

var p1 = this.deCasteljau(cp,r - 1, i, t);

var p2 = this.deCasteljau(cp,r - 1, i + 1, t);

return [(1 - t) * p1[0] + t * p2[0], (1 - t) * p1[1] + t * p2[1]];

};

To use the function simply wrap a loop around with your favorite segments amount.

/**
 * Compute Points with deCasteljau.
 * 
 * @param minT - min t (init 0)
 * @param maxT - max t (init 1)
 * @param segments - amount segments, the more the smoother (init 20)
 * @param controlPoints - list of control points [n][x,y]
 * @return points[segments][x,y] points on bezier curve
 */
var computePoints = function(minT, maxT, segments, controlPoints) {
    var points = [segments];
    var t;
    // compute segments + 1 points
    for (var i = 0; i <= segments; ++i) {
        // compute t for t_min and t_max
        t = min_t + i / segments * (min_t + max_t);
        points[i] = this.deCasteljau(controlPoints,controlPoints.length - 1, 0, t);
    }
    return points;
};

/**

* Compute Points with deCasteljau.

* @param minT - min t (init 0)

* @param maxT - max t (init 1)

* @param segments - amount segments, the more the smoother (init 20)

* @param controlPoints - list of control points [n][x,y]

* @return points[segments][x,y] points on bezier curve

var computePoints = function(minT, maxT, segments, controlPoints) {

var points = [segments];

var t;

// compute segments + 1 points

for (var i = 0; i <= segments; ++i) {

// compute t for t_min and t_max

t = min_t + i / segments * (min_t + max_t);

points[i] = this.deCasteljau(controlPoints,controlPoints.length - 1, 0, t);

}

return points;

};

Now simply draw the points.

/**
 * Draw points.
 * 
 * @param context
 * @param points - list of points
 */
var draw = function (context, points) {

    context.beginPath();

    // check all segment lines
    for (var i = 1; i <= this.parameter.segments; ++i) {
        // draw curve [x,y]
        context.moveTo(points[i - 1][0], points[i - 1][1]);
        context.lineTo(points[i][0], points[i][1]);
    }
    context.closePath();

    // set drawing style
    context.lineWidth = 2; 
    context.strokeStyle = "#ff0000"; // line color

    // actually start drawing
    context.stroke();
}

/**

* Draw points.

* @param context

* @param points - list of points

var draw = function (context, points) {

context.beginPath();

// check all segment lines

for (var i = 1; i <= this.parameter.segments; ++i) {

// draw curve [x,y]

context.moveTo(points[i - 1][0], points[i - 1][1]);

context.lineTo(points[i][0], points[i][1]);

}

context.closePath();

// set drawing style

context.lineWidth = 2;

context.strokeStyle = "#ff0000"; // line color

// actually start drawing

context.stroke();

}

Et voilà! The animation idea is inspired by Johan Borgström‘s article about bezier curves.

This is my solution to cg2 exercersise a01.2-1.3.

WebGL Course – Canvas API: Draggable Lines and Circles

December 29, 2012 / Jan Rabe / 4 Comments

Well there is not much to say about this excerise, really. You can create lines and circles, drag them, and change their attributes.

This is my solution to cg2 exercersise a01.1.

WebGL: warmup

December 29, 2012 / Jan Rabe / 0 Comments

What are the pros/cons of WebGL?
Read Quote of Henrik Bennetsen’s answer to What are the pros/cons of WebGL? on Quora

This is my “solution” to cg2 exercersise a00-warmup.

Theme by Anders Norén — Up ↑

My Tweets

Frequently visiting

My Cloud

Amazing people

Favorite Tools

APIs

Online Tools

Tutorials

My Latest Animes

Category2D

Unity: Rescaling Fonts

Resizing and reducing color palette of images with command-line

Texture Packer

Thinking out of the box

How to boost android canvas performance with a buffered Image

Doodle Drawer – Brushes

Parametric Curves and deCasteljau Bezier Curves

WebGL Course – Canvas API: Draggable Lines and Circles

WebGL: warmup