Generative art: game

December 21st, 2013 — Generative art

Colors from Rayman game art (tinyurl.com/k8o7qla). Drawed using mousegestures.

A guide to Haxe Flambe

October 3rd, 2013 — Haxe

If you want to create games for the web, give Flambe a try. I wrote some documentation for Flambe to help you getting started. Check it out here.
Flambe is a fast, expressive, and cross-platform engine for Flash and HTML5 games. Flambe renders very well to both Flash and HTML5. For Flash it is using Stage3d, for HTML it draws on WebGL with canvas as fallback for mobile. You can still use Flash to create animations, these can be converted using Flump. This is a tool to suck the sprites+animations out of Flash. Flambe has nice integration of Flump exported animation.

I have covered lots of topics, which are Flambe specific but also Haxe related.
Flambe’s core: Entity-Components Tweening/Working with values Signal Event System User Interaction Scenes & Transitions Assets Working with assets Preloading assets Working with images Working with sound Working with text Configuration files Live asset reloading Publish your game Customizing the embed page WebGL Conditional compilation Other Classes Types Casting in Haxe Debugging Overdraw visualizer FlashDevelop Help FAQ Known issues limitations Troubleshooting More Flambe Plugins, tools, external stuff
..and more

» View the documentation

Composable animations with Flambe

October 3rd, 2013 — Haxe

Flambe Animating sprites in Flambe is very easy, when working with AnimatedFloats. Let me introduce another way of animating things, that can be very helpful when creating games. This approach is maybe different than you are used to, but can be very powerful.

Take a look at this code example. This is the most basic form of animating values in Flambe.

Animate the x-position of a sprite to 100px (absolute position) with some easing:
mySprite.x.animateTo(100, 1, Ease.backInOut);

The example below is actually the same as the first code example, but makes use of the Script. Basically you use a Script, that runs an Action. A Script manages a set of actions that are updated over time. Scripts simplify writing composable animations.
// create a script var script = new Script();

// run an action script.run(new AnimateTo(mySprite.x, 100, 1));

// add the script (which is a Component) to an Entity. System.root.add(script);

Note on adding Script
In this case I just added the Script to the root. Remember, an Entity can only have one type of Component at the same time. So if you want to run multiple scripts, wrap in new Entities. Mostly I add the script to the most relevant Entity.

If you want to run multiple actions sequentially, you can add a Sequence, which is also an Action, which can run other actions. You’ll get the idea.
// First move a sprite horizontally, then move it vertically script.run(new Sequence([ new AnimateTo(mySprite.x, 100, 1), new AnimateTo(mySprite.y, 100, 1) ]));
Now you can see a bit of the power of the Script class, since this is not easy to do with the basic tween in the first example. Let’s take it further!
If you want to do both things at the same time, but still using the Script, you can add them as Parallel actions. If you want to do everything in parallel, you don’t need a script of course.
// prepare things to do at the same time var parallelActions = new Array(); parallelActions.push(new AnimateTo(mySprite.x, 100, 1)); parallelActions.push(new AnimateTo(mySprite.y, 100, 1));

// First move the box diagonal (horizontal and vertical), then rotate the box to 45degrees script.run(new Sequence([ new Parallel(parallelActions), new AnimateTo(mySprite.rotation, 45, 1) ]));
Now your able to run multiple actions, you can mix up endlessly.

The Script class isn’t only for animating stuff, you can also use it for repeating things. Note Haxe has also its own buildin Timer, so if you only want to delay things, I would go for that. Also, since the actions makes use of Flambe’s gametimer, it would be possible to make slowmotion effects using the SpeedAdjuster, and make the delays relative to that speed (not tested, and not illustrated in any example).
// Call a function every two seconds script.run(new Repeat(new Sequence([ new CallFunction(function () { trace(“Tick”); }), new Delay(2) ])));

entity.add(script);

To stop the script, call
script.stopAll()

If you want to animate normal Floats in Haxe, I suggest to use Actuate, which is the TweenLite of Haxe. (You know what I mean, Actionscript developers). Actuate does not work with Flambe’s Animated float, and could have some NME/OpenFL dependencies.

There are several build-in Actions in Flambe you can use:
AnimateBy, AnimateTo, Delay, CallFunction, FirstOf, MoveBy, MoveTo, Parallel, Repeat, Sequence, Shake

Because writing simple delayed animation can be a pain, I’ve also created a Tweener class, for (delayed) tweening AnimatedFloats, with a simple onComplete.
// syntax: Tweener.to(object:Dynamic, seconds:Float, params:Dynamic, delay:Float = 0, onComplete:Void->Dynamic = null, ?easing:EaseFunction) Tweener.to(mySprite, 1, {x:100, y:100}, .5, onComplete, Ease.backInOut); // moves a sprite diagonal after half a second using backInOut-easing, and then calls onComplete function.

Have fun!

Multi platform fun

April 7th, 2013 — Other

haxe-flash My life as Flashdeveloper changed.
For some Flash is already dead since ages, but for me it’s an important part of my fulltime job. As Flashdeveloper, I’d love to point to the fact that Flash worked from browser x to browser z, but nowadays Flash is not that widely supported anymore. On desktop it was/is, but we cannot forget mobile and tablets these days. For a long time I thought that it would not change thát soon, but my mindset is changed. New challenges!

I got the overall feeling that our jobs as Flashdevelopers are changing, we are expected to create websites/games that work everywhere. The client requests and expectations have changed too. One language, all devices, same appearance. Its the developers dream, but its also an illusion. It would be so nice to just build only one product, which would be compatible on all devices, all old and newer browsers. In the real world of web development, a nightmare has born, because this is the reality: device XX version X.XX with browser X version X.XX does not support feature XX, but feature XX works unexpected, and scaling is messed up after doing XX. That is my experience on my first mobile project. I don’t like to complain, but mobile browsers are also messed up. The client does not care about this and the end-user doesn’t either, so that makes creating very rich web experiences complicated sometimes.

I see lots of Flash coders learn other stuff, some go native mobile, go HTML5, or do hardcore coding with shaders and stuff. So time to expand the view! I’m not that up-to-date with mobile and apps. I never gave myself time to actually create mobile apps, it looks like a complete other world compared to ‘normal’ and the interactive experience sites I’ve created before. I dread to learn Objective C or Java *only* to create an platform specific application. No one can look into the future, but I hope over time web apps will survive in a way. I also hope mobile browsers will become more solid, because I like the web more than apps.

In the meanwhile

.. I start to like Haxe. Haxe is perfect for the transition, it brings several worlds more close to each other. It’s a code language with very nice features, when compared to actionscript 3 (which I personally really love). For my first commercial game at MediaMonks we used the Flambe framework, a mobile browser game. Flambe renders very well to both Flash and HTML5. For Flash it is using Stage3d, for HTML it draws on canvas, WebGL is coming soon too. You can still use Flash to create animations, these can be converted using Flump. This is a tool to suck the sprites+animations out of Flash. Flambe has nice integration of Flump exported animation. Yes, the workflow is a few steps back, but since you can use Flash IDE as tool, its doable and fun! (Oh and with fun I mean to create the game using this new workflow, not to debug on all devices; that sucks badly). Flambe is a very good Haxe framework for HTML+Flash, so if you don’t know it yet, check it out. My second project with Haxe/Flambe, tweetfighter.nl, is a ‘game’ where you can fight with social data, it works on lots of new mobile devices.

There is still a lot to learn about Haxe, that’s the exciting part 🙂 You can use Haxe to target HTML and Flash like I did, but you can also target PHP or nodeJS, or if you like to target mobile apps using c++, thats all possible. I have never used nodeJS or c++, so that makes me wonder if it makes development more easy or difficult. But I really like the feeling I’m very close to lots of unknown platforms with the same toolset. The language itself is also very nice, and the upcoming Haxe 3 has neat new features. It would be nice if Haxe gets a little bit more attention, since the idea is pretty good.

“Flash is just a platform that you can target if you wish”
(quote by Nicolas Cannasse, founder of Haxe)

HTML5 (in modern environments) works pretty good. In the early days, you had to build a HTML alternative for Flash. Now, Flash is used a lot as fallback for HTML5. Since Haxe, we can target HTML and Flash at the same time, so that give the choice of technology per platform (like Flash works better on desktop, HTML better on mobile). At first it looks like Haxe was very limited in control, but with a bit knowledge and even when you use a frameworks like NME or Flambe, you can still build own custom components and create professional applications/games. You have more control then you would think, conditional compilation is very useful (also search for haxe magic). So the results of the projects are very promising!

I’m very proud of both of my projects at MediaMonks, since I had to learn a lot of new things in a short amount of time. That said, I’m very interested in creating games, this is a new world and gives me more challenges as developer. It makes me want to create custom tools and useful classes, optimize workflow, relearn about performance optimization and follow slightly other type of developers with cool interesting approaches. I already met some nice Haxe and game developers. I will probably share related stuff on twitter (@mknol) or via this blog, so keep in touch!

Generative art: Garden

December 27th, 2012 — Generative art

It’s been a while, but I got some new inspiration to create some new images. Generative arts keeps triggering me, so I started with a fresh new engine. It’s the same engine as I used for the faces of the previous two posts.

I’ve coded some straight-forward ribbons, no additional lines or shapes and stuff this time. I’ve created two pieces of art in the same style, I’ve used a nice colors an image of a garden. It’s created using actionscript (flash). Because it’s created using mouse gestures, it took a some time to fill the details.