Posts Tagged ‘VECTOR’

Saturday, November 2nd, 2013

Could this be the library that makes SVG the vector replacement for Flash? Snap.svg being based on the SVG standard makes it a better fit for mobile and smaller computing.

Snap.svg is like Raphaël, and actually made by the same author Dmitry Baranovskiy. This library is sponsored by Adobe so this not only looks great as a library, but has the right support. Snap.svg is a very usable way to get vector graphics more accessible to creative iteration and into more content on mobile. It also makes working with SVG very simple over the verboseness of the declarative svg tags.

Silverlight and other xml based declarative markup vector/graphics libraries are nice for interop but it also causes problems with support across many browsers, exporters, etc. It is getting easier and there needs to be a way to get vector based content animating on mobile devices in browsers. d3.js, another awesome svg library,  has made it easy to combine data and svg/vector based beautiful charts, maps and more.  But Snap.svg has the library that looks more friendly to Flash type architecture and libraries combined with the simplicity of jquery like javascript selectors and control. The binary nature of Flash content can’t compare on the standard front so having Adobe interested in sponsoring a vector library that is standard is great. In the end neither Silverlight or Flash won but a combined vector and declarative vector framework in SVG has found new life with mobile and it appears a new contender in vector animation and interactive content.

Adobe, along with CreateJS and Cordova/PhoneGap has really been moving in good directions with sponsoring libraries and open source toolkits for mobile content creators.

Snap.svg makes it easier to use SVG and you can animate it.

Another unique feature of Snap is its ability to work with existing SVG. That means your SVG content does not have to be generated with Snap for you to be able to use Snap to work with it (think “jQuery or Zepto for SVG”). That means you create SVG content in tools like Illustrator, Inkscape, or Sketch then animate or otherwise manipulate it using Snap. You can even work with strings of SVG (for example, SVG files loaded via Ajax) without having to actually render it first which means you can do things like query specific shapes out of an SVG file, essentially turning it into a resource container or sprite sheet.

Finally, Snap supports animation. By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging.

 

 

Saturday, April 30th, 2011

Making 2D games in Unity is getting better with products like RageSpline for making vector like splines to create objects (texturable or color), by far one of the best additions to the Unity Asset Store.  The Unity Asset store is a great new place for inspiring products that are excellent, RageSpline shows why.

$50 in the Unity Asset Store but worth it, I hope it is expanded to import many vector formats.

The author is Juha Kiili is the author of this awesome piece of tech and it is seemingly doing well. This could be a full fledged 2d toolkit easily with many import/export capabilities.

Features of RageSpline

  • Creating 2D meshes and lines with bézier-based splines.
  • Outlining with single color, variable width per control point + natural/sharp switch per point.
  • Solid one color fills.
  • Linear gradient fills with two colors and GUI-adjustable scale, offset position and rotation.
  • Emboss styling with two colors and GUI-adjustable adjustable scale, rotation and smoothness variable.
  • Texturing support with GUI-adjustable scale, offset and rotation.
  • Automatic physics generator.
  • Adjustable vertex count for outline, fill, emboss and physics.
  • Example game included: RageCar.

Other Asset Store must haves like EZ-GUI and Sprite Manager make the 2D game creation experience in Unity very focused on the game development and design with performance handled.

 

 

 

Sunday, October 31st, 2010

Helpful tool for taking vector art from Adobe Illustrator .ai assets and exporting them as html5 with canvas script.

It is a visitmix lab product  so it is a Microsoft tool. Mike Swanson has builtmany great conversion tools for interactive such as SWF2XAML (silverlight/wpf markup).

Friday, May 22nd, 2009

Flash 10 will be ready for mainstream hopefully by the end of this year, or early ’10 when the penetration numbers will be up in or around the 90% range via zeh fernando based on previous trajectories.  

With that, Flash 10 has many great new things such as the Vector structure that allows a collection of a certain type, which results in a faster collection because of the known type.  So anywhere where Arrays are used, that is a possible candidate for a performance increase within some code because you are asking the virtual machine to do less work on each loop (not having to dynamically find out the type).

ByteArray (Thibault Imbert) has demonstrated that for the JPEG encoding in corelib it is up to 2.5 times faster using Vectors than Arrays.  Your mileage may vary heavily but it is almost a guaranteed speed boost due to less work.  This obviously has great possibilities for speeding up code that uses lots of arrays.  

Due to the performance boost the Vector does have some constraints in the typical give and take of coder flexibility with compiler and virtual machine overhead.  Vectors are more explicit and strongly typed which is why they are fast, but this is also limiting.

In addition to the data type restriction, the Vector class has other restrictions that distinguish it from the Array class:

  • A Vector is a dense array. Unlike an Array, which may have values in indices 0 and 7 even if there are no values in positions 1 through 6, a Vector must have a value (or null) in each index.
  • A Vector can optionally be fixed-length, meaning the number of elements it contains can’t change.
  • Access to a Vector’s elements is bounds-checked. You can never read a value from an index greater than the final element (length - 1). You can never set a value with an index more than one beyond the current final index (in other words, you can only set a value at an existing index or at index [length]).

 [ Vector docs  ]

ByteArray not only used Vectors heavily but did other optimizations that are always good to do, even though optimization is evil when you are working with precious client side resources ensuring an optimized base starting point can be a good thing.

So what did I do ?

  • I used bitwise operators as much as possible.
  • I replaced all Arrays with fixed length Vectors.
  • I used pre-incrementation rather than post-incrementation (thanks Joa for this one ;)).
  • I casted to int all my Vector indices access.
  • Other minor stuff you always do to optimize your code 

Other sources as well for even more optimization or shall I say efficient AS3:

Friday, March 13th, 2009

Polygonal labs, maker of some of the best demos, information and tools for AS3 since inception updated the killer AS3 Data Structures for Game Developers and ported it to haXe.

Of course along the way making many improvements and showing great information on how and why the haXe version is faster which mainly boils down to a more strict virtual machine but flexible still with generics.

haXe is fast because it is a very highly optimized virtual machine language with compiler (and could be called a virtual machine to target other VMs similar to LLVM with the ability to target the Neko VM, AVM2 or Javascript, it is more than just a language) by Nicolas Cannasse that may one day overtake directly coding for the AVM2 or maybe we will even see haXe have more influence on flash soon for performance gains.  Some of the Alchemy LLVM virtual machine work is similar in nature to what haXe does and helps the language become an abstraction and translates into highly optimized code from very powerful and productive language syntax.

Anyways, I ramble, be sure to check out Data Structures for Game Developers by Polygonal Labs now ported for haXe as hx3ds if you are doing any sort of work in AS3 or haXe for AS3 it will be worth your while and provide a very common and useful data structures capabilities into your production that is highly optimized from one of the best AS3 developers.

As the name suggests, hx3ds is a port of as3ds for haXe and is now available at lib.haxe.org. hx3ds only supports the flash player 10 target, as it makes extensive use of the Vector class. If you need data structures that compile across all platforms, take a look at colhx instead.

Here’s a list of new features:

  • orders of magnitude faster
  • collections now support clone() and shuffle() operations
  • object pooling framework
  • revised graph, tree and linked list classes
  • memory manager for the virtual memory API (more on this soon)

The Structures Included

Multi-Dimensional Arrays

The library contains a two-dimensional and three-dimensional array. They are both implemented by a single linear array rather than nested arrays. This is the fastest method in flash to simulate multi-dimensional arrays and outperforms the nested array method because multiple array lookups are slower compared to one lookup combined with a simple arithmetic expression (which you can also often precompute in the outer loop). The most obvious application would be a tilemap in 2d or a layered tilemap in 3d.

Queue

This is also called a FIFO structure (First In – First Out). The queue comes in two variations, which have the same methods, but differ in their implementations: There is the arrayed queue, which obviously uses an array internally, and the linked queue, which is build upon a linked list. They are both very similar, except that the arrayed version has a fixed size and is faster.
A common application would be a command queue – imagine you have a unit in a strategy game and apply many commands which the unit should follow. All commands are enqueued and afterwards dequeued and processed in order.

Stack

Also commonly know as a FILO structure (First In – Last Out). Like the queue, this comes in two flavors: arrayed and linked. A stack is often not used directly, but a very important concept in programming. Please note, that a queue and a stack are not real structures, because they just define how data is accessed rather then stored.

Tree

A node-based structure. Every tree starts from a single node, called the root node. The root node can contain any number of child nodes, and every child node can again contain children. A tree node with no children is called a leaf node. In fact if you draw the nodes of a tree it looking like a real tree with branches. The AS3 display architecture is also a tree structure, so you could use this to manage your display objects and update them by traversing through the tree. Also, this is useful for decision trees, BVHs, storing a plot line or storing data recursively by applying the composite pattern.

Binary Tree

This is just a specialized kind of tree where each node is only allowed to have up to two children, called the left and right node. Binary trees are very often used for parsing input data, for example arithmetic expressions or when building a scripting system.

Binary Search Tree (BST) and Hash Table

Both structures store data that can be retrieved quickly by using a key. The method however differers greatly: The BST uses a recursive approach to split up large amounts of data into smaller sets. A hash table stores sparse key-based data using a hash-key in a small amount of space.

Linked Lists

A linked list is similar to an array. The main difference is that in an array, each cell contains just the data and is accessed by an index. A linked list consists of several node objects, which in addition to storing the data, manage a reference to the next node (singly linked) or to the next and previous node (doubly linked) in the list. Think of it as a more natural approach to work with sequential data.
Other benefits are that you can insert and remove data quickly by just calling the appropriate method on the node itself – you don’t have to manage array indexes. Also in AS3 object access is faster than array access, so it competes very well in terms of performance when iterating over the list.

Heap and Priority Queue

A Heap is a special kind of binary tree in which every node is bigger than its child nodes. Whatever you throw into a heap, it’s automatically sorted so the item with the ‘most significant’ value (depending on the comparison function) is always the front item. A priority queue is build upon the heap structure, and can manage prioritized data – which can be used in limitless ways.

Graph

A graph is a loose node-based structure. Nodes are connected with arcs, and every node can point to any other node. They can also point to each other creating a bi-directional connection. It is essential for path finding, AI, soft-body dynamics with mass-springs systems and a lot more.

Bit Vector

A bit vector is some kind of array in which you can store boolean values (true/false – 1/0) as close as possible without wasting memory. I currently can’t think of a reasonable application, because usually you should have enough memory – but it’s nice to have because it shows basic bit masking operations.

Wednesday, October 15th, 2008

Mike Chambers posted that Flash Player 10 is officially live. This completes your 1-2 punch of RIA/game platform releases of Silverlight and Flash this week.

We have just released the shipping version of Flash Player 10 (Mac, Windows and Linux). You can find more information on all of the new features on the Flash Player product page.

You can download the player for Mac, Windows and Linux players from here.

You can grab debug and standalone players from here.

You can grab the release notes from here.

Flash Player 10 is great news. There are so many things in it from a new data structure (Vector), to local FileReference, to Matrix and 3D helpers, to speed improvements and video enhancements being able to play other video types and more (this was actually in a late version of flash player 9 as well but will be used more here). It does take time for flash versions to get out in the wild, about 9 months to where they are in the 90%-95% range where you can convince people to use it in production, but getting those skills now is good.  The scripting platform is still Actionscript 3 so anyone still making Flash Player 8 and AS2 stuff is now two revolutions behind.

Another thing I am looking forward to soon (next week) that is missing from both Flash and Silverlight, is the ability to develop for the iPhone, which Unity3D is dropping the iPhone kit on Oct 22nd. Unity3D has effectively taken Director’s 3d game development (hardware accelerated) market lead away this year and late last year and is a great platform. Director who?

Lots of great tools and platforms to create the innovative new applications, games and markets that are so needed right now. Go create!

Tuesday, April 15th, 2008

Mathieu Badimon released the sweet Five3D vector 3d engine recently. Zeh noted this (and has some experiments) but this is a tracking and howto blog and I like to keep a timeline of influential releases.

You might have seen the Mathieu Badimon labs previously with the very nice scroll handle and technique and ability to rotate and translate the vector objects in 3d space. Now you too can make interfaces with the same cool library.

The one thing I like about this vector engine is well first of all it is vector and secondly it is pretty fast and not too processor intensive, but looks killer.