Move or rotate the entity's children according to a certain motion.
This method is part of a function bound to "Move": It is used
internally for ensuring that when a parent moves, the child also
moves in the same way.
Sets one or more entities to be children, with the current entity (this)
as the parent. When the parent moves or rotates, its children move or
rotate by the same amount. (But not vice-versa: If you move a child, it
@@ -76,56 +76,55 @@
objects (if any), and this._parent is its parent entity object (if any).
As many objects as wanted can be attached, and a hierarchy of objects is
possible by attaching.
The height of the entity. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the ._h property.
Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.
Determines whether a point is contained by the entity. Unlike other methods,
an object can't be passed. The arguments require the x and y value.
The given point is tested against the first of the following that exists: a mapArea associated with "Mouse", the hitarea associated with "Collision", or the object's MBR.
Returns the x, y, w, h properties as a rect object
-(a rect object is just an object with the keys _x, _y, _w, _h).
-
The keys have an underscore prefix. This is due to the x, y, w, h
-properties being merely setters and getters that wrap the properties with an underscore (_x, _y, _w, _h).
An object with this entity's _x, _y, _w, and _h values. If an object is passed in, it will be reused rather than creating a new object.
+
Note: The keys have an underscore prefix. This is due to the x, y, w, h properties being setters and getters that wrap the underlying properties with an underscore (_x, _y, _w, _h).
The rotation state of the entity, in clockwise degrees.
this.rotation = 0 sets it to its original orientation; this.rotation = 10
sets it to 10 degrees clockwise from its original orientation;
this.rotation = -10 sets it to 10 degrees counterclockwise from its
@@ -138,34 +137,34 @@
rotation. (Numerical errors do not occur until you get to millions of degrees.)
The default is to rotate the entity around its (initial) top-left corner; use
.origin() to change that.
If the entity is visible or not. Accepts a true or false value.
Can be used for optimization by setting an entities visibility to false when not needed to be drawn.
The entity will still exist and can be collided with but just won't be drawn.
The width of the entity. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the ._w property.
Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.
The x position on the stage. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the ._x property.
The y position on the stage. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the ._y property.
The z index on the stage. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the ._z property.
A higher z value will be closer to the front of the stage. A smaller z value will be closer to the back.
diff --git a/api/AngularMotion.html b/api/AngularMotion.html
new file mode 100644
index 0000000..ba6bef2
--- /dev/null
+++ b/api/AngularMotion.html
@@ -0,0 +1,109 @@
+
+
+
When entity has rotated due to angular velocity/acceleration a Rotated event is triggered.
NewRotationDirection [New direction = {-1 | 0 | 1}]
When entity has changed rotational direction due to rotational velocity a NewRotationDirection event is triggered. The event is triggered once, if direction is different from last frame.
MotionChange [Motion property name and old value = { key: String, oldValue: Number }]
When a motion property has changed a MotionChange event is triggered.
Component that allows rotating an entity by applying angular velocity and acceleration.
+All angular motion values are expressed in degrees per second (e.g. an entity with vrotation of 10 will rotate 10 degrees each second).
A property for accessing/modifying the angular(rotational) acceleration.
+The acceleration increases the velocity over time, resulting in ever increasing speed.
+
Example
var ent = Crafty.e("2D, AngularMotion");
+
+var arotation = ent.arotation; // retrieve the angular acceleration
+ent.arotation += 1; // increase the angular acceleration
+ent.arotation = 0; // reset the angular acceleration
A property for accessing/modifying the angular(rotational) velocity.
+The velocity remains constant over time, unless the acceleration increases the velocity.
+
Example
var ent = Crafty.e("2D, AngularMotion");
+
+var vrotation = ent.vrotation; // retrieve the angular velocity
+ent.vrotation += 1; // increase the angular velocity
+ent.vrotation = 0; // reset the angular velocity
When this component is added to an entity it will be drawn to the global canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities.
-
Crafty.canvas.init() will be automatically called if it is not called already to initialize the canvas element.
When this component is added to an entity it will be drawn to the global canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities.
+
Crafty.canvasLayer.init() will be automatically called if it is not called already to initialize the canvas element.
Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using `resetHitChecks(component)`).
HitOff [ Data { { componentName } }]
Triggered when collision with a specific component type ceases
Component to detect collision between any two convex polygons.
Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using `resetHitChecks(component)`).
HitOff [componentName = {String}]
Triggered when collision with a specific component type ceases
Component to detect collision between any two convex polygons.
If collision checks are registered for multiple component and collisions with
multiple types occur simultaniously, each collision will cause an individual
event to fire.
-
Note: All data received from events is only valid for the duration of the event's callback.
-If you wish to preserve the data, make a copy of it.
-
For a description of collision event data (hitData above), see the documentation for
+
Note: All data received from events is only valid for the duration of the event's callback. If you wish to preserve the data, make a copy of it.
+
For a description of collision event data (hitData above), see the documentation for
.hit().
A comma seperated list of components to check for collisions with.
+
public this .checkHits(String component1[,..,String componentN])
component#
A component to check for collisions with.
Performs collision checks against all entities that have at least one of
the components specified when calling this method. If collisions occur,
a "HitOn" event containing the collision information will be fired for the
@@ -80,35 +73,34 @@
will be fired.
Calling this method more than once for the same component type will not
cause redundant hit checks.
-
Note: Hit checks are performed upon entering each new frame (using
-the EnterFrame event). It is entirely possible for object to move in
-said frame after the checks were performed (even if the more is the
-result of EnterFrame, as handlers run in no particular order). In such
-a case, the hit events will not fire until the next check is performed in
-the following frame.
-
Example
Crafty.e("2D, Collision")
+
If you want more fine-grained control consider using .hit() or even Crafty.map.search().
+
Note: Hit checks are performed upon entering each new frame (using the EnterFrame event). It is entirely possible for object to move in said frame after the checks were performed (even if the more is the result of EnterFrame, as handlers run in no particular order). In such a case, the hit events will not fire until the next check is performed in the following frame.
+
Example
Crafty.e("2D, Collision")
.checkHits('Solid') // check for collisions with entities that have the Solid component in each frame
- .bind("HitOn", function(hitData){
- console.log("Collision with Solid entity occurred for the first time.");
+ .bind("HitOn", function(hitData) {
+ Crafty.log("Collision with Solid entity occurred for the first time.");
})
- .bind("HitOff", function(comp){
- console.log("Collision with Solid entity ended.");
- });
Crafty.polygon object that will act as the hit area.
-
public this .collision(Array point1, .., Array pointN)
point#
Array of [x, y] coordinate pairs to generate a hit area polygon.
-
Constructor that takes a polygon or array of points to use as the hit area,
+ .bind("HitOff", function(comp) {
+ Crafty.log("Collision with Solid entity ended.");
+ });
Optional Crafty.polygon object that will act as the hit area.
+
public this .collision([Array coordinatePairs])
coordinatePairs
Optional array of x, y coordinate pairs to generate a hit area polygon.
+
public this .collision([x1,y1,..,xN,yN])
point#
Optional list of x, y coordinate pairs to generate a hit area polygon.
+
Constructor that takes a polygon, an array of points or a list of points to use as the hit area,
with points being relative to the object's position in its unrotated state.
The hit area must be a convex shape and not concave for collision detection to work properly.
If no parameter is passed, the x, y, w, h properties of the entity will be used, and the hitbox will be resized when the entity is.
If a hitbox is set that is outside of the bounds of the entity itself, there will be a small performance penalty as it is tracked separately.
+
In order for your custom hitbox to have any effect, you have to add the Collision component to all other entities this entity needs to collide with using this custom hitbox.
+On the contrary the collisions will be resolved using the default hitbox. See .hit() - MBR represents default hitbox collision, SAT represents custom hitbox collision.
Example
Crafty.e("2D, Collision").collision(
- new Crafty.polygon([50,0], [100,100], [0,100])
+ new Crafty.polygon([50, 0, 100, 100, 0, 100])
);
-Crafty.e("2D, Collision").collision([50,0], [100,100], [0,100]);
Check collision with entities that have this component
-
applied to them.
-
[Returns]
false if there is no collision. If a collision is detected,
-
returns an Array of collision data objects (see below).
-
Tests for collisions with entities that have the specified component
+Crafty.e("2D, Collision").collision([50, 0, 100, 100, 0, 100]);
+
+Crafty.e("2D, Collision").collision(50, 0, 100, 100, 0, 100);
Check collision with entities that have this component applied to them.
+
[Returns]
false if there is no collision. If a collision is detected, returns an Array of collision data objects (see below).
+
Tests for collisions with entities that have the specified component
applied to them.
If a collision is detected, data regarding the collision will be present in
the array returned by this method.
@@ -120,16 +112,19 @@
obj: [entity],
type: ["MBR" or "SAT"],
overlap: [number]
-}]
obj: The entity with which the collision occured.
-type: Collision detection method used. One of:
-
+}]
+
obj: The entity with which the collision occured.
+
type: Collision detection method used. One of:
MBR: Standard axis aligned rectangle intersection (.intersect in the 2D component).
-
SAT: Collision between any two convex polygons. Used when both colliding entities have the Collision component applied to them.
-overlap: If SAT collision was used, this will signify the overlap percentage between the colliding entities.
+
SAT: Collision between any two convex polygons. Used when both colliding entities have the Collision component applied to them.
+
+
+
overlap: If SAT collision was used, this will signify the overlap percentage between the colliding entities.
A comma separated list of components to stop checking for collisions with.
+
public this .ignoreHits(String component1[,..,String componentN])
component#
A component to stop checking for collisions with.
Stops checking for collisions with all, or certain, components. If called
without arguments, this method will cause all collision checks on the
entity to cease. To disable checks for collisions with specific
@@ -140,19 +135,14 @@
Example
Crafty.e("2D, Collision")
.checkHits('Solid')
...
- .ignoreHits('Solid'); // stop checking for collisions with entities that have the Solid component
public this .onHit(String component, Function hit[, Function noHit])
component
Component to check collisions for.
-
hit
Callback method to execute upon collision with component. Will be passed the results of the collision check in the same format documented for hit().
-
noHit
Callback method executed once as soon as collision stops.
-
Creates an EnterFrame event calling .hit() each frame. When a collision is detected the callback will be invoked.
-Note that the hit callback will be invoked every frame the collision is active, not just the first time the collision occurs.
-If you want more fine-grained control consider using .checkHits or .hit.
public this .onHit(String component,Function callbackOn[,Function callbackOff])
component
Component to check collisions for.
+
callbackOn
Callback method to execute upon collision with component. Will be passed the results of the collision check in the same format documented for hit().
+
callbackOff
Callback method executed once as soon as collision stops.
+
Creates an EnterFrame event calling .hit() each frame. When a collision is detected the callbackOn will be invoked.
+Note that the callbackOn will be invoked every frame the collision is active, not just the first time the collision occurs.
+
If you want more fine-grained control consider using .checkHits(), .hit() or even Crafty.map.search().
A comma seperated list of components to re-check for collisions with.
+
public this .resetHitChecks(String component1[,..,String componentN])
component#
A component to re-check for collisions with.
Causes collision events to be received for collisions that are already
taking place (normally, an additional event would not fire before said
collisions cease and happen another time).
@@ -165,8 +155,8 @@
Example
// this example fires the HitOn event each frame the collision with the Solid entity is active, instead of just the first time the collision occurs.
Crafty.e("2D, Collision")
.checkHits('Solid')
- .bind("HitOn", function(hitData){
- console.log("Collision with Solid entity was reported in this frame again!");
+ .bind("HitOn", function(hitData) {
+ Crafty.log("Collision with Solid entity was reported in this frame again!");
this.resetHitChecks('Solid'); // fire the HitOn event in the next frame also, if the collision is still active.
})
public this .attr(String property,Any value[,Boolean silent[,Boolean recursive]])
property
Property of the entity to modify
value
Value to set the property to
silent
If you would like to supress events
recursive
If you would like merge recursively
Use this method to set any property of the entity.
-
public this .attr(Object map[, Boolean silent[, Boolean recursive]])
map
Object where each key is the property to modify and the value as the property value
+
public this .attr(Object map[,Boolean silent[,Boolean recursive]])
map
Object where each key is the property to modify and the value as the property value
silent
If you would like to supress events
recursive
If you would like merge recursively
Use this method to set multiple properties of the entity.
-
Setter options:
-silent: If you want to prevent it from firing events.
-recursive: If you pass in an object you could overwrite sibling keys, this recursively merges instead of just merging it. This is false by default, unless you are using dot notation name.first.
-
public Any .attr(String property)
property
Property of the entity to modify
+
Setter options:
+
+
silent: If you want to prevent it from firing events.
+
recursive: If you pass in an object you could overwrite sibling keys, this recursively merges instead of just merging it. This is false by default, unless you are using dot notation name.first.
+
+
public Any .attr(String property)
property
Property of the entity to modify
[Returns]
Value - the value of the property
Use this method to get any property of the entity. You can also retrieve the property using this.property.
public this .defineField(String property,Function getCallback,Function setCallback)
property
Property name to assign getter & setter to
+
getCallback
Method to execute if the property is accessed
+
setCallback
Method to execute if the property is mutated
+
Assigns getters and setters to the property.
+A getter will watch a property waiting for access and will then invoke the
+given getCallback when attempting to retrieve.
+A setter will watch a property waiting for mutation and will then invoke the
+given setCallback when attempting to modify.
+
Example
var ent = Crafty.e("2D");
+ent.defineField("customData", function() {
+ returnthis._customData;
+}, function(newValue) {
+ this._customData = newValue;
+});
+
+ent.customData = "2"// set customData to 2
+Crafty.log(ent.customData) // prints 2
Iterates over found entities, calling a function for every entity.
The function will be called for every entity and will pass the index
in the iteration as an argument. The context (value of this) of the
function will be the current entity in the iteration.
public this .removeComponent(String Component[,soft])
component
Component to remove
soft
Whether to soft remove it (defaults to true)
Removes a component from an entity. A soft remove (the default) will only
refrain .has() from returning true. Hard will remove all
associated properties and methods.
Example
var e = Crafty.e("2D,DOM,Test");
e.removeComponent("Test"); //Soft remove Test component
-e.removeComponent("Test", false); //Hard remove Test component
Makes sure the entity has the components listed. If the entity does not
have the component, it will add it.
(In the current version of Crafty, this function behaves exactly the same
@@ -163,28 +181,29 @@
component dependencies -- i.e. to indicate specifically that one component
will only work properly if another component is present -- and used
addComponent in all other situations.)
Get the rectangular region (in terms of the grid, with grid size cellsize), where the object may fall in. This region is determined by the object's bounding box.
The cellsize is 64 by default.
public this Crafty.addEvent(Object ctx,HTMLElement obj,String event,Function callback)
ctx
Context of the callback or the value of this
obj
Element to add the DOM event to
event
Event name to bind to
callback
Method to execute when triggered
@@ -65,11 +65,13 @@
finally the callback method.
If no element is passed, the default element will be window.document.
Callbacks are passed with event data.
-
Example
Will add a stage-wide MouseDown event listener to the player. Will log which button was pressed
-& the (x,y) coordinates in viewport/world/game space.
+
Note: This is related to DOM events only, not Crafty's own event system. Of course, you can trigger Crafty events in the callback function!
+
Example
Normally you'd use Crafty's built-in mouse component, but for the sake of an example let's pretend that doesn't exist.
+The following code will add a stage-wide MouseDown event listener to the player, and log both which button was pressed
+and the (x,y) coordinates in viewport/world/game space.
a string represenation of the color to assign, in any valid HTML format
assignee
an object to use instead of creating one from scratch
-
[Returns]
An object with _red, _green, and _blue properties assigned.
-
Potentially with `_strength` representing the alpha channel.
- If the assignee parameter is passed, that object will be assigned those values and returned.
+
[Returns]
An object with _red, _green, and _blue properties assigned. Potentially with _strength representing the alpha channel. If the assignee parameter is passed, that object will be assigned those values and returned.
Add sound files and play them. Chooses best format for browser support.
Due to the nature of HTML5 audio, three types of audio files will be
required for cross-browser capabilities. These formats are MP3, Ogg and WAV.
When sound was not muted on before pause, sound will be unmuted after unpause.
When sound is muted Crafty.pause() does not have any effect on sound
The maximum number of sounds that can be played simultaneously is defined by Crafty.audio.maxChannels. The default value is 7.
public this Crafty.audio.add(String id,String url)
id
A string to refer to sounds
url
A string pointing to the sound file
-
public this Crafty.audio.add(String id, Array urls)
urls
Array of urls pointing to different format of the same sound, selecting the first that is playable
-
public this Crafty.audio.add(Object map)
map
key-value pairs where the key is the id and the value is either a url or urls
+
public this Crafty.audio.add(String id,Array urls)
urls
Array of urls pointing to different format of the same sound, selecting the first that is playable
+
public this Crafty.audio.add(Object map)
map
key-value pairs where the key is the id and the value is either a url or urls
Loads a sound to be played. Due to the nature of HTML5 audio,
three types of audio files will be required for cross-browser capabilities.
These formats are MP3, Ogg and WAV.
@@ -87,17 +87,17 @@
]);
//only one format
-Crafty.audio.add("jump", "sounds/jump.mp3");
public this Crafty.audio.play(String id,Number repeatCount)
public this Crafty.audio.play(String id,Number repeatCount,Number volume)
id
A string to refer to sounds
repeatCount
Repeat count for the file, where -1 stands for repeat forever.
volume
volume can be a number between 0.0 and 1.0
[Returns]
The audio element used to play the sound. Null if the call failed due to a lack of open channels.
@@ -108,22 +108,22 @@
//play and repeat forever
Crafty.audio.play("backgroundMusic", -1);
-Crafty.audio.play("explosion",1,0.5); //play sound once with volume of 50%
Will stop the sound and remove all references to the audio object allowing the browser to free the memory.
If no id is given, all sounds will be removed.
This function uses audio path set in Crafty.path in order to remove sound from the assets object.
public Function bind(String eventName,Function callback)
eventName
Name of the event to bind to
callback
Method to execute upon event triggered
[Returns]
callback function which can be used for unbind
Binds to a global event. Method will be executed when Crafty.trigger is used
diff --git a/api/Crafty-c.html b/api/Crafty-c.html
index 9931811..6e2649e 100644
--- a/api/Crafty-c.html
+++ b/api/Crafty-c.html
@@ -55,7 +55,7 @@
-
public void Crafty.c(String name,Object component)
name
Name of the component
component
Object with the component's properties and methods
Creates a component where the first argument is the ID and the second
is the object that will be inherited by entities.
@@ -66,10 +66,12 @@
(See the two examples below for further explanation)
Note that when a component method gets called, the this keyword will refer to the current entity the component was added to.
-
A couple of methods are treated specially. They are invoked in partiular contexts, and (in those contexts) cannot be overridden by other components.
+
A handful of methods or properties are treated specially. They are invoked in partiular contexts, and (in those contexts) cannot be overridden by other components.
-
init will be called when the component is added to an entity
-
remove will be called just before a component is removed, or before an entity is destroyed. It is passed a single boolean parameter that is true if the entity is being destroyed.
+
required: A string listing required components, which will be added to the component before init() runs.
+
init: A function to be called when the component is added to an entity
+
remove: A function which will be called just before a component is removed, or before an entity is destroyed. It is passed a single boolean parameter that is true if the entity is being destroyed.
+
events: An object whose properties represent functions bound to events equivalent to the property names. (See the example below.) The binding occurs directly after the call to init, and will be removed directly before remove is called.
In addition to these hardcoded special methods, there are some conventions for writing components.
in the example above the field _message is local to the entity. That is, if you create many entities with the Annoying component they can all have different values for _message. That is because it is a simple value, and simple values are copied by value. If however the field had been an object or array, the value would have been shared by all entities with the component because complex types are copied by reference in javascript. This is probably not what you want and the following example demonstrates how to work around it:
-
Crafty.c("MyComponent", {
+Crafty.e("Annoying").annoying("I'm an orange...");
To attach to the "EnterFrame" event using the events property instead:
In the examples above the field _message is local to the entity. That is, if you create many entities with the Annoying component, they can all have different values for _message. That is because it is a simple value, and simple values are copied by value. If however the field had been an object or array, the value would have been shared by all entities with the component, because complex types are copied by reference in javascript. This is probably not what you want and the following example demonstrates how to work around it.
Circle object used for hitboxes and click maps. Must pass a x, a y and a radius value.
Example
var centerX = 5,
centerY = 10,
radius = 25;
new Crafty.circle(centerX, centerY, radius);
When creating a circle for an entity, each point should be offset or relative from the entities x and y
(don't include the absolute values as it will automatically calculate this).
public void Crafty.defineField(Object object,String property,Function getCallback,Function setCallback)
object
Object to define property on
+
property
Property name to assign getter & setter to
+
getCallback
Method to execute if the property is accessed
+
setCallback
Method to execute if the property is mutated
+
Assigns getters and setters to the property in the given object.
+A getter will watch a property waiting for access and will then invoke the
+given getCallback when attempting to retrieve.
+A setter will watch a property waiting for mutation and will then invoke the
+given setCallback when attempting to modify.
+
Example
var ent = Crafty.e("2D");
+Crafty.defineField(ent, "customData", function() {
+ returnthis._customData;
+}, function(newValue) {
+ this._customData = newValue;
+});
+
+ent.customData = "2"// set customData to 2
+Crafty.log(ent.customData) // prints 2
public Crafty.device.deviceMotion(Function callback)
callback
Callback method executed once as soon as device motion is change
Do something with normalized device motion data:
{
- 'acceleration' : ' Grab the acceleration including gravity from the results',
- 'rawAcceleration' : 'Display the raw acceleration data',
- 'facingUp' : 'Z is the acceleration in the Z axis, and if the device is facing up or down',
- 'tiltLR' : 'Convert the value from acceleration to degrees. acceleration.x is the acceleration according to gravity, we'll assume we're on Earth and divide by 9.81 (earth gravity) to get a percentage value, and then multiply that by 90 to convert to degrees.',
- 'tiltFB' : 'Convert the value from acceleration to degrees.'
+ acceleration : 'Grab the acceleration including gravity from the results',
+ rawAcceleration : 'Display the raw acceleration data',
+ facingUp : 'Z is the acceleration in the Z axis, and if the device is facing up or down',
+ tiltLR : 'Convert the value from acceleration to degrees. acceleration.x is the acceleration according to gravity, we'll assume we're on Earth and divide by 9.81 (earth gravity) to get a percentage value, and then multiply that by 90 to convert to degrees.',
+ tiltFB : 'Convert the value from acceleration to degrees.'
}
public Crafty.device.deviceOrientation(Function callback)
callback
Callback method executed once as soon as device orientation is change
Do something with normalized device orientation data:
{
- 'tiltLR' : 'gamma the angle in degrees the device is tilted left-to-right.',
- 'tiltFB' : 'beta the angle in degrees the device is tilted front-to-back',
- 'dir' : 'alpha the direction the device is facing according to the compass',
- 'motUD' : 'The angles values increase as you tilt the device to the right or towards you.'
+ tiltLR : 'gamma -- the angle in degrees the device is tilted left-to-right.',
+ tiltFB : 'beta -- the angle in degrees the device is tilted front-to-back',
+ dir : 'alpha -- the direction the device is facing according to the compass',
+ motUD : 'The angle's values increase as you tilt the device to the right or towards you.'
}
If Crafty.mobile is equal true Crafty does some things under hood:
- set viewport on max device width and height
- set Crafty.stage.fullscreen on true
diff --git a/api/Crafty-diamondIso.html b/api/Crafty-diamondIso.html
index 524dfb5..844efd2 100644
--- a/api/Crafty-diamondIso.html
+++ b/api/Crafty-diamondIso.html
@@ -55,17 +55,21 @@
-
Place entities in a 45deg diamond isometric fashion. It is similar to isometric but has another grid locations
+In this mode, the x axis and y axis are aligned to the edges of tiles with x increasing being down and to the
+right and y being down and to the left.
public this Crafty.diamondIso.init(Number tileWidth,Number tileHeight,Number mapWidth,Number mapHeight)
tileWidth
The size of base tile width's grid space in Pixel
+
tileHeight
The size of base tile height grid space in Pixel
mapWidth
The width of whole map in Tiles
mapHeight
The height of whole map in Tiles
+
x
the x coordinate of the TOP corner of the 0,0 tile
+
y
the y coordinate of the TOP corner of the 0,0, tile
Method used to initialize the size of the isometric placement.
Recommended to use a size alues in the power of 2 (128, 64 or 32).
This makes it easy to calculate positions and implement zooming.
public Object Crafty.domHelper.translate(Number clientX,Number clientY)
clientX
clientX position in the browser screen
+
clientY
clientY position in the browser screen
+
[Returns]
Object {x: ..., y: ...} with Crafty coordinates.
+
The parameters clientX and clientY are pixel coordinates within the visible
+browser window. This function translates those to Crafty coordinates (i.e.,
+the coordinates that you might apply to an entity), by taking into account
+where the stage is within the screen, what the current viewport is, etc.
Crafty.domLayer._div is a div inside the #cr-stage div that holds all DOM entities.
+If you use canvas, a canvas element is created at the same level in the dom
+as the the Crafty.domLayer._div div. So the hierarchy in the DOM is
+
Crafty.stage.elem
+ - Crafty.domLayer._div (a div HTMLElement)
+ - Crafty.canvasLayer._canvas (a canvas HTMLElement)
When the entity is created and all components are added
public Entity Crafty.e(String componentList)
componentList
List of components to assign to new entity
+
public Entity Crafty.e(String component1[,..,String componentN])
component#
Component to add
Creates an entity. Any arguments will be applied in the same
way .addComponent() is applied as a quick way to add components.
Any component added will augment the functionality of
diff --git a/api/Crafty-easing.html b/api/Crafty-easing.html
new file mode 100644
index 0000000..b02aaa8
--- /dev/null
+++ b/api/Crafty-easing.html
@@ -0,0 +1,101 @@
+
+
+
An object for tracking transitions. Typically used indirectly through "SpriteAnimation", "Tween", or viewport animations.
+
If a method allows you to specify the type of easing, you can do so by providing a custom function or a string corresponding to the name of a built-in method.
+
Built-in easing functions are "linear", "smoothStep", "smootherStep", "easeInQuad", "easeOutQuad", and "easeInOutQuad".
+
A custom function will be passed a parameter t which will vary between 0 and 1, and should return the progress of the animation between 0 and 1.
+
Example
Here is how you might use easing functions with the "Tween" component.
+
var e = Crafty.e("2D, Tween");
+// Use built-in easing functions
+e.tween({x:100}, 1000, "smoothStep");
+e.tween({y:100}, 1000, "easeInQuad");
+// Define a custom easing function: 2t^2 - t
+e.tween({w:0}, 1000, function(t){return2*t*t - t;});
This is a simple wrapper for console.error. You can disable logging messages by setting Crafty.loggingEnabled to false.
+It is recommended to use Crafty.error, as console.error can crash on IE9.
public this .findClosestEntityByComponent(String comp,Number x,Number y[,Object target])
Finds closest entity with certain component at given coordinates.
+
comp
Component name
+
x
x position where to look for entities
+
y
y position where to look for entities
+
target
Target element wherein to look for entities
+
This method is used internally by the .mouseDispatch and .touchDispatch methods, but can be used otherwise for
+Canvas entities.
+
Finds the top most entity (with the highest z) with a given component at a given point (x, y).
+For having a detection area specified for the enity, add the AreaMap component to the entity expected to be found.
+
The 'target' argument is only meant to be used by .mouseDispatch and touchDispatch; defaults to Crafty.stage.elem,
+thus using this function directly is only worth anything for canvas entities.
+
Returns the found entity, or undefined if no entity was found.
Just after the viewport is initialised. Before the EnterFrame loops is started
public this Crafty.init([Number width,Number height,String stage_elem])
public this Crafty.init([Number width,Number height,HTMLElement stage_elem])
Number width
Width of the stage
Number height
Height of the stage
String or HTMLElement stage_elem
the element to use for the stage
Sets the element to use as the stage, creating it if necessary. By default a div with id 'cr-stage' is used, but if the 'stage_elem' argument is provided that will be used instead. (see Crafty.viewport.init)
Starts the EnterFrame interval. This will call the EnterFrame event for every frame.
-
Can pass width and height values for the stage otherwise will default to window size (see Crafty.DOM.window).
+
Can pass width and height values for the stage otherwise will default to window size.
All Load events will be executed.
Uses requestAnimationFrame to sync the drawing with the browser but will default to setInterval if the browser does not support it.
Place entities in a 45deg isometric fashion. The alignment of this
+grid's axes for tile placement is 90 degrees. If you are looking
+to have the grid of tile indicies for this.place aligned to the tiles
+themselves, use DiamondIso instead.
An obect with x and y fields, each of which have a start and end field. In other words, the object has this structure: {x:{start Number,end Number},y:{start Number,end Number}}
+
This method returns an object representing the bounds of the viewport
Example
var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now movedvar area = iso.area(); //get the areafor(var y = area.y.start;y <= area.y.end;y++){
for(var x = area.x.start ;x <= area.x.end;x++){
iso.place(x,y,0,Crafty.e("2D,DOM,gras")); //Display tiles in the Screen
}
-}
An object with top and left fields represneting the viewport's current center
+
public this Crafty.isometric.centerAt(Number x,Number y)
x
The x position to center at
+
y
The y position to center at
+
This method centers the Viewport at an x,y location or gives the current centerpoint of the viewport
Example
var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved//After moving the viewport by another event you can get the new center point
-console.log(iso.centerAt());
public this Crafty.isometric.size(Number tileSize)
tileSize
The size of the tiles to place.
Method used to initialize the size of the isometric placement.
Recommended to use a size values in the power of 2 (128, 64 or 32).
This makes it easy to calculate positions and implement zooming.
+ google groups
+ starwed@gmail.com
+ github