Tag Archives: open-source

Flash, Libraries

Added TreeList to MinimalComps

4 Comments

I love the MinimalComps set of components, but always thought it was missing a folder type tree component. I finally needed one the other day, and found other tree components that where too bloated, and not “in the spirit” on MinimalComps, so decided to make one myself. +1 for opensource :)

It inherits from the standard MinimalComps List component, so has basically the same interface. It also uses it’s own custom ListItem called TreeListItem. The data object you pass in is almost the same as the List, except each item object can contain and array of its children items, using the key “items”, and you can optionally set an “expanded” flag on any item. Expanded is set to true for each item by default.

[actionscript3]var treeItems:Array = [
{ label:’treelist_test_app’, items:[
{ label:’bin’, expanded:false, items:[
{ label:’js’, items:[
{ label:’swfobject.js’ }
] },
{ label:’expressInstall.swf’ },
{ label:’index.html’ },
{ label:’TreeListTestApp.swf’ }
] },
{ label:’lib’, items:[] },
{ label:’obj’ , items:[
{ label:’TreeListTestAppConfig.old’ },
{ label:’TreeListTestAppConfig.xml’ }
] },
{ label:’src’, items:[] },
{ label:’file_tree_test.as’ },
{ label:’TreeList Test App.as3proj’ },
] }
];[/actionscript3]

Then just create the TreeList like any other component.

[actionscript3]testTree = new TreeList(mainContainer , 0, 0, treeItems);
testTree.setSize(200, 200);
testTree.addEventListener(Event.SELECT, handleTestTreeSelect);[/actionscript3]

Once the component is setup, just handle the SELECT event just like you would with the List

[actionscript3]private function handleTestTreeSelect(e:Event):void
{
trace(‘TreeList select:’, TreeList(e.target).selectedItem.label);
}[/actionscript3]

There are a few new methods to the TreeList, such as collapseAll(), expandAll(), collapseItem(item:Object), expandItem(item:Object), and toggleExpandItem(item:Object). They should all be pretty straight forward. To have a play and see what the TreeList is about, take a look at the quick example I made here : Adam Harte – MinimalComps TreeList test.

You can grab the TreeList and TreeListItem from my fork on GitHub for now (AdamHarte / minimalcomps – GitHub), but I am hoping it will be merged into the main repo soon. I think the TreeList will need a bit of real-world testing, but most of the functionality comes from the List anyway. Feel free to have a play and let me know if there are any bugs.

Cheers,
Adam

Game development, Haxe, Libraries, Tutorials

On-screen joystick with Gamepad-haxe

Leave a comment

Only a few days after I tweeted about porting Gamepad over to haXe, I see a tweet from Philippe Elsass saying he has added an on-screen joystick to the library. This is great, because it was the next thing on my list after sorting out some issues with getting accelerometer data from my Android device with NME. Open-source is fantastic btw!

I just merged this update with my main branch on GitHub and had a good play, so thought I would give a quick run down on how to use it. Philippe has done a great job, so it’s pretty simple, but even looking at his code has taught me quite a bit about haxe.

First thing you need a Gamepad instance

[actionscript3]var gamePad:Gamepad = new Gamepad(stage, false, 0.4);[/actionscript3]

Then you need something to control with the joystick, a Car possibly:

[actionscript3]var car:Sprite = new Sprite();
car.graphics.beginFill(0xFF6600, 1);
car.graphics.drawRect(-25, -50, 50, 100);
car.graphics.endFill();
car.x = 300;
car.y = 200;
addChild(car);[/actionscript3]

Before we can create the on-screen joypad, we need to get some graphics ready to use for the controls. We need a background and a thumb to touch or click on and drag around.

[actionscript3]var thumb:Sprite = new Sprite();
thumb.graphics.beginFill(0xFF6600);
thumb.graphics.drawCircle(25,25,25);
var bg:Sprite = new Shape();
bg.graphics.beginFill(0xFF6600, 0.3);
bg.graphics.drawCircle(50, 50, 50);[/actionscript3]

Now we can add the on-screen joypad and pass the gamepad, and the two graphic assets to it.

[actionscript3]var gamePadView:OnScreenJoystick = new OnScreenJoystick();
gamePadView.init(gamePad, 50, thumb, bg);
gamePadView.x = 440;
gamePadView.y = 330;
addChild(gamePadView);[/actionscript3]

So now we have everything set up that we need. All we need to do is handle the update tick. The OnScreenJoystick needs its update method called to keep it in sync with the Gamepad. The OnScreenJoystick will automatically update the Gamepads properties, so we can use the Gamepad the same way we always do from this point.

[actionscript3]private function onTick():Void
{
gamePadView.update();

car.rotation += gamePad.x * -gamePad.y * 2;

var carAngle:Float = -car.rotation * (Math.PI / 180);
car.x += Math.sin(carAngle) * gamePad.y * 5;
car.y += Math.cos(carAngle) * gamePad.y * 5;
}[/actionscript3]

Now when you run the app you should have a car that you can drive around with your on-screen joystick. Easy!

All this example code is either from Iain Lobb’s original Gamepad testers or from Philippe Elsass’ modifications for the on-screen joystick. You can have a play for yourself with the Gamepad example tests, or get the source, which comes with the tests.

Haxe

Just ported Iain Lobb’s Gamepad classes to haXe

Leave a comment

For the last few weeks I have been working on a personal game in haXe/NME that I will post about later. This weekend I got to the stage where I started to really think about user input. My goal for the game is to take full advantage of NME’s ability to target a bunch of platforms. I know I need to handle the game controls in a way that would allow for totally different input methods based on the target the game is published for i.e. keyboard for Flash/HTML5 in the browser, and accelerometer or touch screen controls for native iOS and Android apps.

This game is my first real project I have worked on by myself using both haXe and NME, so there has definitely been a learning curve. I felt like the way I would usually do keyboard input in a flash game would not be the best way to do things, mainly because of the multiple output targets. I needed a more object-orientated abstract way of handling the game controls. I also wanted something that would fit into my existing gameloop, and not force me to adopt some crazy bloated design pattern.

I am a huge fan of The Creative Coding Podcast, and basically everything that Iain Lobb and Seb Lee-Delisle get up to. So I remembered a little set of util classes Iain made in AS3 called Gamepad. I also remembered him mention on the podcast he was experimenting with haXe. I did a quick search but it seemed like no one had ported Gamepad over to haXe yet, and there didn’t even seem to be anything close to it for haxelib. I thought this was very strange for a language where game creation is one of it’s main uses.

I thought porting Gamepad would be a great way to learn a bit more about haXe, and get something useful at the end of it. It only took me a few hours, including testing it with my game, but by the end I had it working on Flash, C++, and HTML5 canvas. Check out adamharte/Gamepad-Haxe on GitHub, and don’t be afraid to fork it, and add issues to the issue tracker or just comment here. For the original ActionScript 3 version check out iainlobb/Gamepad on GitHub.

Some things I learned; A few small language differences coming from ActionScript. Such as there is no indexOf method of the Array class. Seems like the best way around this is to use a Lambda. The Lambda class has a bunch of static method for interacting with Iterable objects e.g. To get the index of an object in an array you might do:

[actionscript3]Lambda.indexOf(myItems, exampleItem);[/actionscript3]

That is a little less intuitive than the AS3 Array class, but fine once you know.

Now that I have the direct port and can start using it in my game, I will try to come up with ways I might improve on it, and make it work with other targets better. First I will try and get it working for touch screen controls on mobile devices, then maybe look into some strange behaviour I was getting with the HTML5 target.

So all round, I think I learnt a fair bit from porting Gamepad. It forced me to look deeper into some specifics that I needed to get to the end result. I will definitely be looking for other missing pieces that haXe can adopt. Big thanks to Iain Lobb for writing Gamepad in the first place, and especially for making it open-source.

Cheers,
Adam