Openfl papertoy art project

I love to create projects where you take stuff from the digital world (temporarily, intangible) and drag it into the “real” world. This project is a good example of that. I create a papertoy generated in code and cut by a machine.

Besides filling my blog with new content, I have two other reasons to write this post:

  1. You can use Haxe/Openfl for something else then game-developement! I know I am not the only one, but this group of developers are not as present as the game-defs.
  2. It’s a long and complicated process to get to the end result: it’s difficult to explain this in detail to others, so I wrote down the whole story for interested friend/family/colleagues/fans???

If I ever grow a pair, this post be one of the two talks I would give during wwx2015 just to balance the all tech talks during the event.
But nothing is growing besides my hair, so instead I will write about the process and end-result.

Feedback is always nice, so please don’t hesitate to comment!

Continue reading

navigateToURL for Openfl

I have a Flash background.
And I notice that I first think (or Google) what would the code be in Flash and then try to convert it to Haxe/Openfl

Same with:

<a href="open-link-in-new-window" target="_blank">

AS3 code

var myURL:URLRequest = new URLRequest("open-link-in-new-window");
navigateToURL(myURL, "_blank");

Openfl code

var myURL:URLRequest = new URLRequest("open-link-in-new-window");
openfl.Lib.getURL(myURL, "_blank");

Using svg for assets in Openfl

I wanted to use svg for icons in an Openfl project.
It’s not intuitive to do this, so I wrote it down for future use.

What are svg files?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Source: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Good to remember that they scale awesomely without lost of resolution!

How to add it to your project

You can find the svg code on github.
But you can install it easier with haxelib

Open your terminal and write:

haxelib install svg

To add it to an OpenFL project, add this to your project file:

<haxelib name="svg" />

Code

import openfl.Assets;
import openfl.display.Shape;
import openfl.display.Sprite;
import format.SVG;
 
class SVGExample extends Sprite
{

  public function new()
  {
    var svg : SVG = new SVG(Assets.getText("assets/openfl.svg"));
    var shape : Shape  = new Shape();
    svg.render(shape.graphics);
    addChild(shape);
  }
}

NICE!!!
But now the cool part: it scales without losing resolution

Check the highlighted line for the changes,

import openfl.Assets;
import openfl.display.Shape;
import openfl.display.Sprite;
import format.SVG;
 
class SVGExample extends Sprite
{

  public function new()
  {
    var svg : SVG = new SVG(Assets.getText("assets/openfl.svg"));
    var shape : Shape  = new Shape();
    svg.render(shape.graphics,0,0,1000,1000);
    addChild(shape);
  }
}

for the curious: https://github.com/openfl/svg/blob/master/format/SVG.hx

Sources

  • I remembered this gist, which explains almost everything.
  • Get icons here, they are free for download as long as you credit freepik
  • Featured image from webdesignerdepot

Delay call, Timer delay in Haxe

When I started programming for as3, I started to collect little snippets of code.
Some to explain the transition from as2 to as3. And some just to have one place to go to when I forgot how it worked…

I decided to do it also for Haxe and Openfl.
For some reason I forget some stuff easily.

This is one I need often and forget easily:

How do you call a function with delay?

(without a tweening engine!)

Not that difficult:
http://api.haxe.org/haxe/Timer.html

haxe.Timer.delay(someFunction, 1000);

But what if you want to send some extra parameters?

How do you call a function (with parameters) with delay?

(without a tweening engine!)

I found my answer on stack.

haxe.Timer.delay(callback(someFunction,"abc"), 10);

But I prefer a more readable versie, also mentioned in the same post.
(probably because it looks very much like the javascript version…)

haxe.Timer.delay(function () {
    func(arg1, arg2);
}, delay);

Source:
http://stackoverflow.com/questions/3063286/pass-arguments-to-a-delayed-function-with-haxe

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!