Daniel Cohen talks shop
Posts tagged dev
Working With Large Arrays in Action Script
Jul 26th
While working on partly connected system using flex technology I figured out quick enough that working with large data sets (thousands of records) is not applicable. Especially because i held a number of those sets which I needed to cross reference in number of occasions.
My solution was to create an indexed collection which i can benefit both worlds of Dictionary and ArrayCollection , with that in mind I designed and implemented the IndexedArrayCollection.
The collection extends ArrayCollection and adds the capability of indexing a single member of an object in the collection (I assume that each element is an object).
IndexArrayCollection constructor receives two arguments first is a source array and second is the index field name (attribute name).
Pong Applied Box2DFlex Physics Engine
Jul 22nd
I decided to learn by example and assigned myself the goal of building pong in box2d.
box2d is an overkill for pong , but what do you know, it’s damn easy.
the gist of it is :
- layout
- world setup
- event handling
Full source code hosted in github Pong in Box2DFlex.
The layout
a SkinnablePhysicsContainer holding two border containers (named p1 and p2) which are the player bars and corelating p1Goal and p2Goal which will act as hit area for the ball graphics element (Ellipse).
Setting Up the World
when the application loads it maps all elements in the physics container to box2d bodies , in woldSetup method i specified different mapping types to components
The key thing you need to know is that you want p1, p2 and the goals controls to be kinematic bodies so
- they are not affected by collations and
- they do not collide with each other
- they affect dynamic bodies colliding into them
and an event handler onBodiesContact that triggers when two bodies collide .
Event Hadnling
onBodiesContact is triggered each time two bodies collide indie it i do a simple test to see which to bodies collided and triggers the respective indicator.
world_mouseMoveHandler is handling the translation of mouse position and movement of p2
var p2b:b2Body = worldUIContainer.getComponentBody(p2);
p2b.SetPosition(new b2Vec2(p2b.GetPosition().x,worldUIContainer.worldDef.meter(nextPos)));
Box2D Flex Complex Shapes Mapping
Jul 15th
One of the drawbacks in box2d is that it’s not supporting concave polygon shapes .
for that box2d flex employs several algorithms and converts a complex shape to a set of polygons (I took the idea from 3d modeling)
at this point i would like to give credits to
- sakri.net for he’s shape outline algorithm
- makc.coverthesky.com for he’s polygon2d
both state that their algorithms are far from perfect but for a v0.2 it’s a good start.
in this case I’ll start from the demo and then go into the code so see how the doll bellow is segmented to several triangles.
first thing is to understand how what the doll constructs of , in our case it’s a graphics
our object can be comprised of anything , graphic shapes , ui controls, images etc’ it has only one caveat - It’s edges must be transparent .
The next thing it to take a look at our physics container
you can see that autoStartPhysicsEngine is set to false. By default SkinnablePhysicsContainer maps all it’s flex objects to box2d shapes on creation, this time we want to interfere before hand and give the engine a different directive to try and map the shape not by it’s boundingBox but by it’s actual edges.
This is done by actionscript code, in which we tell our physics container to parse complex shape and pass it with the shape id and a parsing object, afterwards we call the physics engine to start.
you can see the the shape parser receives an argument specifying the quality of it’s mapping , this is done for performance improvement but might impair edges fidelity.
Simple Box2D Flex Example
Jul 13th
following my previous post announcing Box2D Flex framework i want to share some techniques via examples on how to use the library.
First thing we create add a SkinableContentContainer to and drop some contorls inside it
This, still, does not do anything fancy it just initializes box2d and registers & measures all controls inside our physics container.
next step we add some bindable controls that will change our physics gravity and debug
and the bindable properties to our physics container
now we can play with the gravity sliders and see flex controls bounce around
Announcing Box2D Flex framework
Jul 11th
Prefix
In a previous post demonstrating box2d integration with flex I made a promise (mainly to myself) to share the demo code. When I started to review with sharing in mind it looked cumbersome and overly verbose. So I started cranking on it fixing and straightening the code & architecture and step by step I realized that I’m creating a small Integration layer rather then a POC.
Announcing Box2DFlex
Box2DFlex framework allows you easely integrate box2d into flex framework using mxml. The framewok helps easy integration with flex and exposes box2d world for advanced manipulation.
- extends SkinnableContainer uses flex component lifecycle model
- uses regular MXML and AS flex components
- supports complex shaped flex components (convex and concave) conversion to b2d shapes.
- allows multiple worlds side by side
Getting Started
In order to play with Box2dFlex you will need flash builder 4 and Box2DFlex source which is hosted on GitHub.
and in four simple steps you should
- download the source code
- inport the Box2DFlex and Demos projects into flash builder 4
- compile
- Play with the eamples in Box2Demos project
Building Your Own b2d World
- download the framework
- create a new project
- add refrence to <Box2DFlex dir>/Box2dFlexLib/bin/Box2DFlexLib.swc
- in your MXML add a new SkinnablePhysicsContainer
- set the container’s yGravity property to 10 and autoStartPhysicsEngine to true (yGravity=”10 autoStartPhysicsEngine=”true”)
- if you want your world to contains walls use setBoundries=”true” attribute
- place a button inside SkinnablePhysicsContainer and set it’s properties (width / height / label)
- run the project
Flex 3 hebrew textbox
Jun 29th
following my last post on flex3 RTL label , next challenge was input text with RTL support , in that case I decided to cheat and use html input overlying flex.
Not so elegant solution, but a solution non the less. the trick is to pass the flex component coordinate and position the HTML input accordingly , and on the HTML side handle keyboard and mouse event to let the flex developer feel @ home with regular focus and key press events.
Add the following MXML component to your flex project
Add the following code to your html page
Flex 3 label RTL support
Jun 22nd
If you know or not , I’m leaving and working in Israel, where we have the most annoying text rendering issues.
we write in right to left order – that means in the opposite direction of most languages. Letters and words are left to right, though numbers and other symbols remain right to left.
Through the years I’ve seen (and even wrote) noumerous attempts to build an AS class that will provide this functionality to flash, all of them suffered from quirks and different edge cases.
About a year a go Adobe published a new text rendering engine (TLF) which wasn’t integrated into Flex3 framework , and though flex4 includes the new TLF some still need to work with the 3.x framework so here is a simple example of implementing true RTL label in flex 3 note that you need to download and install Text Layout Framework on your development machine in order to compile the code.
Multitouch + 3D flash 10.1
Apr 15th
I’ve compiled a POC of a 3D model controlled by multitouch events in flex (actually AIR 2.0).
In the application I use TransformGestureEvent dispatched from flash 10.1 player. unfortunately this is the only event fired in Mac and only in AIR mode – adobe it’s lame.
TransformGestureEvent event availability
| Event | Mac Air | Mac Web | Windows (Air+Web) |
| GestureEvent.GESTURE_TWO_FINGER_TAP | v | ||
| GestureEvent.GESTURE_PAN | v | ||
| TransformGestureEvent.GESTURE_ROTATE | v | v | |
| TransformGestureEvent.GESTURE_SWIPE | v | v | |
| TransformGestureEvent.GESTURE_ZOOM | v | v |
TouchEvent availability - windows only (and iPhone but i guess it’s not applicable any more)
| Event | Mac Air | Mac Web | Windows (Air+Web) |
| TouchEvent.TOUCH_END | v | ||
| TouchEvent.TOUCH_MOVE | v | ||
| TouchEvent.TOUCH_OUT | v | ||
| TouchEvent.TOUCH_OVER | v | ||
| TouchEvent.TOUCH_ROLL_OUT | v | ||
| TouchEvent.TOUCH_ROLL_OVER | v | ||
| TouchEvent.TOUCH_TAP | v |
the first version was a bit stale so I’ve added KineticMovementManager which adds a drift effect (like when scrolling an iPhone scroll) but it’s still a work in progress so don’t relay on it.
download source
download installer
IPhone online course, lesson 2
Sep 17th
lesson 2 is mostly about Objective C , object oriented programing , language syntax , and memory management.
this episode has 8 min intro
then minute 10 to 17-43 is basic oop and cocoa
where they talk about the cocoa framework , in summary Objective C is loos type language with dynamic type id.
afterwared they talked about 2.0 Syntax addition (dot notation synthesis etc’) and naming conventions
43-47 dynamic typing
47-49 nil (null object)
49-50 bool (yes/no instead of true)
50-52 selector - this one is interesting – it’s a way to hold the name or promise of a function as an object , you can check if it exists on an instance invoke in etc’ .
52-53 introspection – objective c name for reflection
53-57 working with oject
57-end overview of the cocoa framework data types.
I’m attaching my assignments as reference.
IPhone online course, lesson 1
Sep 9th
Most of my professional carrier is on UI development and regardless to my previous post I started learning IPhone development.
The main reason is that IPhone UI rocks it’s the best, and to be the best you have to learn from the best.
So I don’t think you’ll see me any time soon @ the ITunes store , but I’m sure i’ll get a refreshing view on UI Development.
The course i chose is Stansford’ CS193P which is publicly available online.
lesson 1 video summary :
first 42 minutes are course intro and are useless for online viewers
00:41:50 talking about mac/iphone architecture
00:48:30 cocoa actors: objects, controllers, outlets ,target/action
00:51:00 xcode and interface builder
00:53:00 create a simple application (slider changes label value)
01:03:30 lesson summary
in basics the lesson reviews very quickly the IPhone architecture and gives the first
Assignment 1 requires no coding it is intended to get you situated with the tools
Assignment 2 aim is to get started with Objective-C by writing a small command line tool .
the syntax is different from what i know (mainly C# and JavaScript) and it took me some time to get use to objective c and Xcode.
some hints on objective c :
sometime functions are called with [] surrounding the function and the object e.g.
[string lenght] is the objective c way of saying string.Lenth in c#
Sometimes I used () I’m still not sure why.
some hints on xcode :
auto complete (intellisense) is done with F5.
