Pixel Sprite Generator Editor

Recently I ran into this awesome project by Dave Bollinger: Pixel Spaceship (this project is currently not live anymore but still can be viewed via web.archive.org)

And I had to build something with it. And build it in 8 hours.

I knew that wouldn’t be to difficult because I found Dave’s project via a haxe port of a javascript port of the original work of Dave.

My plan is to create a random papertoy based upon the principle Dave explains on his website.
And the first thing I needed was something to test my idea in editor so it would be easier to see the result.

And there it is:
rp_screenshot.png

Pixel-Sprite-Generator-Editor

check the code on github.

Of course it wasn’t exactly 8 hours, and it’s not finished but it works for the purpose I was building it for.
There are probably a lot of issues with it and currently it only exports to Neko.

But it could be a start of an sprite editor for example :) .

Libs used

* Openfl: https://github.com/openfl
* Haxe procedural sprite generator: https://github.com/Zielak/pixel-sprite-generator
* Haxe port of Keith Peters minimalcomps: https://github.com/Beeblerox/MinimalCompsHX

Tween engine Go – part 2

My last post was about my new WIP tween library Go.

I have been updating my little experiment and it’s getting better.
Looking into other libraries codes is very educational.

Does it perform as good as the default Haxe tween engine Actuate?
Yeah that would have been great, but nope… around 1300 object, Go will start dropping frame-rate in Flash.

My goal was to create a lightweight, simple, compact, chainable tween library for haxe/openfl.

Could I perform as good as Actuate?
I am not sure, Actuate is very well written and Joshua Granick has been working on it for a long time and tested it extensively.
But I probably could improve on my code and get a better performance in Flash (in which I did the stress-test). The downside is that my code will be full of condition compilation and that would mean the code would become more and more complex.

Why am I sure it will improve, well I cheated and did some flash specific code modifications.
Check the code in github
In my first draft it was just:

var range = _props.get(n);
Reflect.setProperty(_target, n, _easing.ease( time, range.from, (range.to-range.from), _duration ) );

and that performed very bad in Flash (if I remember correctly the framerate already dropped after 100 object)
And I updated it to this and that works better… for Flash

var range = _props.get(n);
#if flash
untyped _target[n] = _easing.ease( time, range.from, (range.to-range.from), _duration ) ;
#else
Reflect.setProperty(_target, n, _easing.ease( time, range.from, (range.to-range.from), _duration ) );
#end

So the question is more do I want to change the code for specific platforms?
For now I am not going to focus on Flash to enhance it’s performance… there is little chance that I will be animating 1000+ objects.

So I will be using it in my own projects and will run into problems that I will fix.
You are welcome to use it as well and report bugs or other improvements.

I’ve update the promotional website: check it here.
You can find the stress-test there, where I compare Go with Actuate.
If you want to add your tweening library, add it here in github.
Download/install instructions can be found here.

Happy tweening.

Tween engine Go

I have been playing a lot with Haxe and Openfl in the past, but never for work. That changed this week!

Fun stuff!

A while back I noticed some new tweening engines for Haxe.
That got me curious: can I build my own tweening engine?

Yes I can!

I named it Go, like “lets Go”.
(And like they say in a track from The Prodigy – Everybody In The Place, lets go )

You can check it out on github: https://github.com/MatthijsKamstra/go
There you can find more detailed explanation about how it works, so I only will show some basic code here:

Animate a sprite in 1.5 second to x and y postion and call function when animation is done

Go.to(sprite, 1.5).x(100).y(200).onComplete(onCompleteHandler, ['hello']);

It was fun to write it, but I haven’t tested in all situations.
I have tested lets.Go on targets flash/cpp/html5/neko.
But I wouldn’t use it in a production situation. It needs more testing.

Let me know what you think!

Time for changes

update 1: the update I did changed something, and nobody was able to see beyond the first page… fixed it! Happy reading!

rp_Tumbleweed-in-Monument-Valley.jpg

Yes time for some changes, I want to use the blog more.
But the previous theme (it was my own design) lately blocks my creativity.
I couldn’t look at it anymore, and didn’t want to create a new theme.

So I looked for a minimal design WordPress design…
And found some great tips/themes via wp tavern.

I finally choose Gravit.

Lets see if this clears something up….

GrummSkull papertoy

It’s been a while … I need to share more papertoys with the world.
So here is another custom papertoy from me: GrummSkull.

GrummSkull GrummSkull

This papertoy is a custom based upon the paper skull from Patrick Pasques.
The paper spring used is really great! Better then the spring I used for Drukks and much simpler!
Check out Patrick’s work, its really amazing (blog is in French, but even without translation the images speak for themself) and support his work and buy his books!

Here is the template:

The .ZIP file contains a .PDF
(You can use freeware like FilZip or 7zip to extract a .ZIP-file and read a .PDF with Acrobat or Foxit)

Social stuff works!

I asked everybody to share/like/retweet, and when the number hits 20 I would put this papertoy online:

tweet:

facebook:

about 50+ reactions… love social!

Paper Robot book

This year I was invited by Nick Knite to design papertoys robots for PAPER ROBOTS published by h.f.ullmann.

Here are my robots (sorry for the poor images, couldn’t find a decent shot of them): BurddBott and Walkrr TXR
BurddBott BurddBott

Walkrr_TXR Walkrr_TXR

Paper Robot

Paper Robot

I’m one of the 15 papertoy artists from all around the world and we produced 25 robots!
The book is ready and its awesome!
It will be in four languages (English, German, French and Spanish) and is already available on amazon for pre-ordering.

Some of the artist in the book also wrote about it:
Sal Azad
Tougui
Marko Zuback
3eyedbear
Nick Knite
but the rest of the artist are too awesome not to mention:
Matt Hawkins, Marshall Alexander, Abz, Shin Tanaka, Castleforte, Dolly Oblong, Jonny Chiba, Scott Schallar and Vinsart.

If you want to see more, here is a link to the product-page on ullmann-publishings website with more details and previews.

Eventually there will be microsite on the Ullmann-website, where you can download free robots, some of them brand new and never released before!!
update
The microsite on the Ullman-website is live! Get your free robots over there!!!

Check more photos here, on HAKUSAI PROJECTS coverage of #up13 where we officially introduced the book to the public.

Kunstsommer Arnsberg 2013

Last year I was invited to go to Kunstsommer Arnsberg and luckily I’m invited again.

Last year was fun, but this year is going to be more fun!!!!
There will be more artist to meet!

First where:
The Urban Paper Art Show and Workshop in Arnsberg, Germany is going on this Saturday, August 24th and Sunday, August 25th.
But if you are hungry to meet us: we will be there also on Friday

Then who:
The awesome papertoy artist are:
3eyedbear (NL) – 3eyedbear.com
Alexander Gwynne (UK) – agpapertoys.com
Chris “Cubeecraft” Beaumont (US) – cubeecraft.com
Marshall Alexander (NL) – marshallalexander.net
Merrci (F) – merrci.fr
Nick Knite (DE) – nickknite.com
St.Hellvis (SWE) – sthellvis.com

and me!

There will be also a few awesome papertoy artist showing of there work:
Abz (US)- oh-sheet.com
Faisal Azad (Indonesia) – salazad.com
Tougui (F) – tougui.fr

Kunstsommer Arnsberg [mck] promoPoster

Need more info?
In German, more info about the kunstsommer arnsberg.
Facebook event Urban Paper 2013 – Art Show and Workshop
Google maps: Alter Markt 24, 59821 Arnsberg, Germany
Chris wrote a post about the event, check it out: he collected all posters as well!
Post from Merrci on nicepapertoys.com

Shove-it

A while back I was asked to participate on a very special project: Shove-it.

Note te self: I love that papertoys take me to different places!

Papertoy artist {bay} {kid} {dead} asked me join a elite team of 30+ artists to design a skateboard deck and customize his papertoy Spyro.
Besides that it is awesome to do that, it will be used to raise funds to build a free outdoor skatepark in Des Moines, Iowa.

[mck] deck design for Shove-it

[mck] deck design for Shove-it

SHOVE IT!
An exhibition like no other. A year in the making, SHOVE IT! will feature the custom designs of over 30 artists presented on skateboard decks and paper toys. Our artist roster features talents from 12 countries, spanning five continents!

SHOVE IT! will be hosted by Thee Eye Gallery and will open June 7, 2013. But here’s your chance to grab hold of a deck and paper toy right now by supporting their Kickstarter campaign.

You can see the (30+) list of amazing artist on the kickstarter page, but Garrison Beau Scott posted the list also on his blog with links to there sites. I was impressed by the skills from my fellow artists.

So go check that out, by decks.. or two… or three. It impossible NOT to find a board that you like.

A little selection from the 30+ designers

Kunstsommer Arnsberg

This weekend (11/12 Augustus) I will be at the KunstSommer in Arnsberg, Germany.

Urban Paper 11 & 12 Augustus Kunstsommer Arnsberg

So fans (especially my German fans) if you want to meet me…. or Maarten aka 3eyedbear, Marshall Alexander and Nick Knite (yes, they will also be there).

Besides meeting us in person, seeing our papertoys, there will be an urban paper exhibition with amazing artists like Ryan Hall, ABZ, Merrci, Matt Hawkins, Sal azad and many more!
There will be a workshop, loads of cardboard and colored paper!

Update #1: 3Eyedbear will introduce a brand new model, the Snorfs, so keep coming back to his blog, they will be released right after this show is over.

So if you are in the area of Arnsberg visit us and drink a (German) beer with us! :P

Write CSS with HSS and Haxe on OSX

I’m playing around with Haxe for a while now. My recent experiments are with Neko and PHP.

It’s a little flatfile CMS/website that lets you write Markdown (I’m using mdown from Jason O’Neil) for posts.
For styling (css) I’m using Twitter Bootstrap and for the animations the jQuery wrapper (jQueryExternForHaxe) from Andi Li.
This all is not important for the post, I was just showing off… :P …. or showing what you can controle in one project using Haxe (jQuery, php, neko, js and now CSS)!

Using Twitter bootstrap for styling is very quick and nice. But when you want to modify that you will need to write css.
Not a problem, but what if you want to do it the awesome way?

Meet HSS

From the creator of Haxe (Nicolas Cannasse) comes HSS!

HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks. HSS is a CSS compiler which supports valid CSS syntax, so for every error that occurs during the parsing of the HSS file, it will display and error indicating at which file and which line the error occurred.

Sounds great and it’s written by someone who knows what he is doing, so lets give that a try.
And there comes trouble…

Remember this: I work on Mac OS X 10.6.8.

hss example code

Five steps to get started with HSS on OSX

#1
Download the file: HSS OSX version
The normal way of downloading (just click on the link) for some reason didn’t work for me. I had to download it with right-mouseclick and “Save link as…” (Google Chrome).

#2
Extract the file: the file you downloaded is a “gzip” compression file.
The normale decompression program on OSX don’t work with that (Archive Utility), my default decompression program didn’t work either (The Unarchiver).
Stuffit expander works!

And this is important! The other programs seem to work because there is a file created but its not a “exec”. Stuffit expander creates a file name “hss” other programs create a file named “hss-1.3-osx”

There is probably a terminal version to extract (here) but I stopped trying when I had the file.

#3
Where to leave the HSS executable?
I had a little help with that: (Source) for Linux AND OSX you can place it in the “usr/bin/” directory.
That is a hidden folder normally so you need to change that (but I hope you already did that) (read this post about it)
BTW “Users” is not the same as “usr”
When you drop the HSS executable in the bin folder you will be asked for you password

#4
I’m not 100% sure, but when I think about it while I write this I don’t think that you have to do this.
But just in case I’m wrong….
You need to give the file permission to execute (this is still true if you don’t copy the file in the usr/bin folder).
Open the terminal and type “chmod +x ” (without the quotes and don’t forget the space after x) and drag the HSS file in the terminal.
Press enter and you are done.

Create CSS with HXML

Now we can start with the cool stuff. Lets create an hss file:
(the examples are from Nicolas Cannasse himself)

// Property Variables
var mycolor = #1111AA;
var myfont = "Trebuchet MS", Arial, sans-serif;
body {
    color : $mycolor;
    font : $myfont;
}
// Block Variables
var nomargin = { margin : 0px; padding : 0px; }
pre {
    $nomargin;
    color : #FF0000;
}
// nested blocks
.faq {
	color : #BC683C;
	.form {
		width : 100px;
		textarea {
			width : 100%;
			height : 80px;
		}
		.name {
			font-weight : bold;
		}
	}
	ul {
		margin-left : 20px;
		margin-bottom : 20px;
	}
}
It’s probably useful to mention that ANY CSS file is an HSS file as long it’s validates.
That means that you can take a .css file and rename it to .hss!

(save the file as “style.hss” without quotes in the hss folder; see the folder structure below)

Now update your .hxml file!
Remember I use MonoDevelop 3.0 for OSX

Here a example of the folder structure I used for this example

+ Export
	+ neko
	+ php
+ Source
	+ hss
		- style.hss
	- Foobar.hx
Foobar.hxml

Open your Foobar.hxml file and it should look something like this:

-cp Source
-main Foobar
-neko Export/neko/index.n

--next
-cp Source
-main Foobar
-php Export/php

--next
-cmd "cd Source/hss/"
-cmd "hss style.hss" 
-cmd "hss style.hss -output ../../Export/php/" 
-cmd "hss style.hss -output ../../Export/neko/" 
The quotes are important when on OSX (possibly also for Linux)

Now every time you compile the source for Neko/PHP the css will be compiled in the correct folder!

Brrrrr

Okay, okay, I know I promote MonoDevelop for Haxe coding.
But… for hss/css I don’t think you should use it…
I haven’t tried it yet, but the Haxe plugin for Textmate looks good for it.

happy haxe-ing

Sources used: