March 2012
1 post
6 tags
0.4.6 Released!
Better documentation for internals, including HashMap and DrawManager.
Crafty.module supports uppercase versions (RELEASE etc.) and now uses craftycomponents.com as default repo
.color() now acts as a getter
Rename .delay to .timeout and introduce a new Delay component that is smarter about game pause etc.
Fix the play sound forever issue
Crafty.isPaused() returns whether the game is paused...
February 2012
1 post
0.4.5 Released!
Crafty.module() is used to load community components from craftycomponents.com
Crafty.math added with lots of vector, matrix and other useful functions.
randRange() renamed to math.randomInt()
persist component renamed to Persist
SceneChange event triggered when a scene is played
Crafty.storage added. It’s an abstraction over the different implementations of local storage providing...
November 2011
1 post
Minecraft & GTA: New Demos
I have been making more interesting games as of late. One of them being a multiplayer 2D Minecraft clone with infinite and destructible terrain. The other being a GTA2 clone or driving simulator with a small town to drive or walk around in.
See the demos page to have a play.
September 2011
1 post
0.4.4 Released
The latest version of Crafty has been released.
_SAT now also returns normal of side hit.
Changed keys are passed as data for the Change event.
Added support for circle collision with Crafty.circle, which behaves like Crafty.polygon.
Added TweenEnd event. It takes the Tweened property as an argument.
Added HTML component.
Fixed touch control support
Bug with randRange
There has been quite...
July 2011
1 post
DOM Performance for Games
Article moved to HTML5Grind
June 2011
1 post
API Changes
New version about to be released and with that comes a new API. Well not too bad but for one, every single event is now in CamelCase. This includes MouseDown and EnterFrame. Apologies as you will have to change all existing bindings to these events.
The current changelog is:
CSS 3D transforms
.attach() takes multiple objects
Fixed bug with getClientBoundingRect in FireFox
DOM elements get...
May 2011
1 post
Next version: 0.4.3
Going to release the next version very soon, 0.4.3. The change log is as follows:
CSS 3D transforms
.attach() takes multiple objects
Fixed bug with getClientBoundingRect in FireFox
DOM elements get components added as classes
Fixed Canvas redraw bugs
Animate renamed to SpriteAnimation
Added basic mobile support
Fixed mousedown triggering twice
Draggable bugs fixed
There are a few API...
April 2011
9 posts
Forums = Google Groups
I have decided that all forum like activity will go through Google Groups rather than my SimpleMachineForums for many reasons:
SMF is very hard to skin
Requires registration (yet another account) and OpenID is too much work for one man
Very prone to spam
OK that’s only three but that’s enough. Google Groups isn’t as great as I’d like but it’ll do.
So from now...
Demos Ported
I have ported all the demos (except Elevator Action) to use the latest version of Crafty. I was getting lots of emails about users trying out the demos but seeing lots of errors with the new version so this should help everyone out.
Most of the changes were minor API differences and some were optimized with the newer features. Take a look!
Note: If the demos are not working, you should clear...
0.4.2 Released
This release has a lot of bug fixes and not many new features. Take a look at the changelog for a complete view:
Faster redraw for rotated entities and repeating background in canvas
Added a Crafty.settings object
Smaller game loop
Started mobile support (not ready yet)
Fixed a bug with DOM z-indexes being lower than the canvas
Added a smaller setter function. Removed getter
Removed unused...
Working on new version and fixing demos
Expect some down time as I am porting over all the demos to the latest version.
Sneak peek at new demo
Working on a new strategy based war game.
requestAnimationFrame is A-OK!
Earlier I reported issues with requestAnimationFrame when changing tabs or changing the window and that using it’s counter-part cancelRequestAnimationFrame seemed to fix the issues.
After more tests it is concluded that this is not the issue.
4 tags
0.4.1 Released
Getters and setters added and a major bug fixed where the stage would be removed after window blur. It will now pause the game. If you do not want the game pausing, simply set Crafty.dontPauseOnBlur to true.
A settings object will be added shortly.
Download
0.4 Released
And with lots of new features. It’s been too long and I know 1.0 should be out by now but there are a few things I want completed such as full Mobile support and good amounts of test cases.
Here is the change log:
.css() should accept both JS and CSS notation
.requires() method for adding components if not already added
Detect the browser extension (Moz, webkit, o, ms)
IE rotation and...
Fruit Assassin! New Demo
Click the fruit to slice and dice them.
I made a new demo for a presentation with BrisJS based on Fruit Ninja.
Play
March 2011
9 posts
Particles!
Particle Demo
Leo Koppelkamm has implemented a particle system that should hopefully exist in the next version (1.0). Can’t wait!
Crafty on Google Groups
Join us at Google Groups: http://groups.google.com/group/craftyjs.
I think this will eventually replace the forum.
0.3.2 Released
Nothing major here. Just a bug fix for collision detection.
Download
IRC Channel
Join #crafty on freenode.net
5 tags
Idea for testing JavaScript Projects
Wouldn’t it be great if there was a web app along the lines of JSPerf.com but for testing libraries.
You can easily setup a test case with expected outputs and basically try and break the code. Then if they are valid tests, they can be compiled into one big test suite.
That would make code coverage less an issue and would certainly help me ;)
6 tags
How Crafty will kill Flash
Disclaimer: Sarcasm ahead
Now you know my secret mission. There is little Flash can do that HTML5 can’t (so much so that I can’t even think of one). Therefore it only makes sense to replace Flash entirely by taking the remaining good points and implementing an equivalent in HTML5.
Editor
Flash has an awesome interface. It is very flexible and easy to use.
Welcome Crafty...
Better Docs! →
Did a revamp of the docs with better and more concise explanations
6 tags
Fastest Canvas Drawing Library Ever!
This is a fairly bold statement but I would like to know if any other libraries manage drawing for pure performance as Crafty does.
Crafty will now redraw rectangles that have been changed (by an object moving etc) rather than redrawing the entire canvas element but if more than 60% of the screen is changing (meaning lots of redraw rectangles) then it switches to the naive method where the...
February 2011
10 posts
Plug-in Canvas Performance
After all this work on bringing canvas up to a decent speed I am thinking about a new mini-library or shiv if you will for drop in performance in canvas.
Some of the optimizations that it could do:
Draw an image onto temp. canvas then temp canvas onto main canvas
Use putImageData when possible
requestAnimationFrame for draw updates
Implement redraw regions
The last one may be tricky as the...
Canvas Drawing for 1.0
If you have been following this blog you will know of all the different methods and areas researched to try and get some good performance from canvas.
I think I have finally found a solution that will be beneficial for all cases so I will post the general structure.
1. Any changed objects are added to a register
2. The dirty rect is calculated for each (based on area bounding old position and...
DAE Skew or Scale
Currently there is no support for skewing or scaling (scaling for canvas but looks hideous). I was wondering if anyone actually uses this and therefore should have an implementation?
Most of the time the browsers rendering looks awful anyway so I didn’t think it would be missed.
Drawing Methods on Canvas
I was playing around with different drawing methods on canvas to see which would be the fastest. The tests were drawImage with an image object, drawImage with a temporary canvas object containing nothing but that image already drawn and putImageData which is obtained by using getImageData on the previous temporary canvas.
In Chrome putImageData is slightly faster and little difference between...
Future Plans
Now that 0.3.1 is out, a good chunk of Crafty is completed and good to use. I have some minor features I would like to add but before Crafty matures into 1.0 and considered mission critical (it could happen) I would like unit test everything.
This is slightly hard being a game engine and most things needing user input to test but none-the-less I will do it.
I also wanted to ensure it works for...
RPG Tutorial →
0.3.1 Released
A few bugs were fixed in this release including:
Crafty.window, Crafty.stage and Crafty.viewport recalculating on window resize
Scroll measurements taken into account for mouse events
Attach method will try to rotate if object allows it
Nothing major but important if the game relies on mouse events.
0.3 Released
At last version 0.3 has been released and a lot has changed.
image component uses createPattern
SAT collision so can detect any convex polygon with an overlap value
Window resize for fullscreen games will recalculate values
defineProperty for IE9
Variable frame rate using requestAnimationFrame
Alpha transparency - thanks to Josh Tynjala
Persistent entities through scenes by adding a...
SAT Collision made easy: Part 1
This is going to be a multipart tutorial due to the length and ground to cover.
SAT (or Separating Axis Theorem) is a method of collision that can detect collision between any two convex polygons. It is currently used in the latest development version of Crafty. For this tutorial I will be pasting links that helped me learn the methods.
First you need some basic 2D linear algebra knowledge....
Insanely Great Collision Detection
I have just successfully finished implementing the new and improved collision component using the Separating Axis Theorem. Was quite a challenge to learn but it works.
I was thinking about writing a tutorial on it so if anyone is interested, let me know.
The way to use it is to add the collision component, call the .collision() constructor with a polygon (using new Crafty.polygon()), then use...
January 2011
19 posts
Better Components for all
I am really unhappy with the current gravity component so I think I will just turn it into a ‘physics’ component with basic physics functionality such as gravity, bounce and friction.
Another component that I will implement is drag and drop. Not too hard to do but is a common problem so why not?
Already started working on SAT collision, wish me luck.
CraftyTV
It is about time I make some videos. Who wants to read text all the time?
Not quite sure what to make videos of, maybe just the basics. I could do another “How to make a game” type but would be a bit tedious and long.
Feel free to give me ideas.
JavaSquirrel →
A game about a squirrel and collecting nuts by Eric Garside
Progress!
Good news! Lots has been done today and Crafty is one step closer to coming out of beta.
A list of features/fixes completed:
Window resizing (fullscreen games will recalculate itself on window.resize)
.visible property for some optimization. Set it to false if an entity does not need drawing
Persistent entities through scenes. Just give your entity a component called “persist” and...
Features and Versions
I feel I’ve been a bit secretive regarding the development of Crafty and there hasn’t been a release for a while so I’m going to list what features are done to give an idea what’s to come and how far away release is.
defineProperty for IE9 (optimization)
Variable frame rate (enterframe will use a tick approach)
Alpha transparency
Drawing optimization (in a way (see...
Another Canvas Drawing Method - Back to Basics
It looks like Crafty will be going back to basics in terms of Canvas drawing for the next version.
Much time has been spent on trying to get drawing on Canvas to have decent performance and a decent frame rate, but nearly every solution has brought on more problems and I’m starting to think Occam’s razor has it right.
Apparently the Flash player has a total of two redraw regions when...
Making a basic RPG in Crafty →
A tutorial covering the basics of Crafty and how to create an RPG.
Making the Canvas element usable
It is no secret that the canvas element in HTML(5) is a little bit slow. This makes game development quite a task as games generally need to draw things at least 60 times a second. The naive method of clearing the entire screen and redrawing every object is nowhere near a solution once more and more objects grace the stage.
Crafty was built on top of automatic redraw regions. A redraw regions is...
Asteroids Demo
I just created another demo for Crafty. Asteroids! Nothing flashy but done in less than 200 lines of Crafty code.
http://craftyjs.com/demos/asteroids/
Creating this game made me really want better collision control. Currently all asteroids have the same hit area.
Optimization for 0.3
Previously in v0.2.1, whenever a value is changed on a 2D entity, it would automatically redraw itself even if the next line is another modification. This means it is drawing itself twice when only once is sufficient. This has been fixed and has given some great performance gains.
Another optimization was in the Crafty selector where multiple calls to the Crafty constructor was used which was...
Big To-Do List for 0.3
After reading Josh’s article about his experience building a game with Crafty, I took his great ideas and issues and added them all to the to-do list for version 0.3. Hopefully I am not being too ambitious but it means a stall to the very exciting Crafty Builder.
Unit tests (might hold off for 0.4)
Better minification (46% reduction at the moment)
Use the inbuilt canvas background repeat...
Great Puzzle game built with Crafty →
Forums are go!
I just installed SMF forums so feel free to register if you need any Crafty help. I will be lurking there and will answer any questions people may have.
It’s not as pretty as I would like but at least it’s usable for now.
0.2.1 Update
New version released earlier than expected due to a bug found in the mouse component for DOM entities thanks to Jason Bennett.
Some other features intended for v0.3 are included in this release including:
Global assets array found in Crafty.assets
Universal selector ‘*’ to select all entities (Crafty(“*”))
Still to come: Unit tests, smaller file, super high tech...