craftyjs / crafty Goto Github PK
View Code? Open in Web Editor NEWJavaScript Game Engine
Home Page: http://craftyjs.com
License: MIT License
JavaScript Game Engine
Home Page: http://craftyjs.com
License: MIT License
Redraw regions on shapes is a bit off
Some components don't return anything (void). Better off being consistent and returning the Crafty object return this;
Might speed things up if the prototype is extended for methods (not parameters as they would then share one var).
Canvas comes with background repeat for strokes. Try and redraw region it for canvas.
Make it happen.
DOM can be implemented with CSS3 transform but canvas...? Maybe canvas transformations. Don't really understand how it works.
Make sure all the DOM works in IE. If no canvas, make sure errors don't exist.
Try using filters for rotation, opacity and what-not.
All component variables with an underscore in front should hide itself from the user so not directly accessible. This would also benefit from the change event firing when using attr() or other setters.
Haven't been able to test Crafty on mobile devices but some components to accept mobile inputs would be handy.
Add a component to interpolate the values to make a small animation between 2D properties. Copy the API of jQuery.
The 2D component is becoming very ugly. Refactor it and make sure the non-setter supporting browsers run it.
Useful for components that requires a set of components but should only add if not previously added.
Event function to stop other handlers being called for an event.
Since time is of the essence, how can we help?
Checked out the code. I'm studying it now. Can you map out a small goal roadmap for Crafty.
Maybe we can help with the site a bit. I can jump on a couple of the links that are #comingsoon.
Let us know. Good job so far mate.
The DOM Stage get's created irrespectively to the use of it, so if you would only use the canvas (which is preferably on any browser that fully supports it) the DOM Stage still get's created.
I would opt in for a parameter to the Crafty.init function to set the Stage, DOM or Canvas. This would allow for feature detection and delivering the Stage that is relevant for that browser.
This way you can support the older browsers without support for canvas and the newer browsers can make full utilization of Canvas and the browser's ability to Hardware accelerate it.
At least for Core. Maybe other components.
IE9 supports Object.defineProperty(), but not defineGetter and defineSetter. Support for Object.defineProperty() should be added so that IE9 doesn't need to fall back to the enterframe event.
IE8 also supports Object.defineProperty(), but only specifically for DOM Objects, unfortunately. A try/catch around the call can provide a way to make it into the fallback case when running in IE8.
If entities have the same Z, it arbitrarily decided which goes first. Need to sort by Z and then GUID. Needs to be quick too!
All objects have the same origin, when you change the origin of 1 object all the other objects also change origin.
This shouldn't happen
http://nokarma.org/2011/02/27/javascript-game-development-keyboard-input/index.html
use that example for control over which key is down.
Make the tween object use CSS3 animation.
Make it as fast as possible. Might need to use another tick so that the speeds remain the same.
Scrolling should work by shifting the canvas element an using another canvas.
For mouse over and collision. Maybe convert to a polygon for speed.
If an entity is destroyed, it would be nice to be able to detach it. If this happened automatically based on the "remove" event, that would be pretty helpful.
Add circle collision
Regression from louisstow@bea006b#diff-1
this.stopFalling() is now called on every frame, making it hard to even get off the ground
Now that rotation is implemented, simple rectangle collision isn't that great. More advanced collision is needed. Separating Axis Theorem (SAT) will be added.
Basic rectangle collision can still be used by colliding with the MBR (minimum bounding rectangle) on the object.
The canvas implementation is half-baked and needs to implement clipping as well as no-repeat so it is exactly the same as DOM
Looks terrible.
Include more examples and better explanations.
Check out this post from Paul Irish:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
It might be worth looking into.
The function Crafty.background only adds a background to the DOM stage, it doesn't add a background to the canvas stage if you use that. Somehow Crafty should detect whether there is a canvas or not an add the background to that.
Crafty seems like a great library. Another developer and I ran into this bug when trying to create a scrolling-map game.
I made a quick demo of this bug โ drag the white rectangle around:
When the viewport coordinates are set to negative values, entities aren't drawn or updated correctly.
IE will throw an error when trying to instance Audio.
Detect which browser and which prefix to use (o, moz, webkit).
Rather than setting lots of unnecessary properties
Pull requested.
In reference to this: http://stackoverflow.com/questions/4435009/html5-audio-plays-randomly
I know that short audio clips ( less than about 0.5 second ) have trouble playing in tags. Unfortunately, the some browsers deal with this better than others. My suggestion is this:
Always use sounds bytes that are longer than that length by padding a short clip at the end with silence. So a 0.1s shoot file, become 0.1s shoot + 0.5s of silence. It should work. I added a shoot.ogg that is a little longer than original.
Additionally, if we use only one instance of an audio clip per sound effect, we would have to rewind to the beginning of the sound and play it again if we want to press twice fast.
Triggering audio.play() while a sound is currently playing will not rewind+play automatically.
There are other approaches, but this one at least makes the elevator demo handle "shoot" better. Before my patch, the audio would not be handled well by Chrome 8,9,10 on OSX or
Linux. FF3.6 would also skip sometimes.
Demo : http://loccaro.com/elevatoraction/index.html
TODO: Investigate creating multiple sounds from one sound effect and play all simultaneously.
Be able to use all types of color (rgb, hex, hsl, simple)
{
aliceblue: 'f0f8ff',
antiquewhite: 'faebd7',
aqua: '00ffff',
aquamarine: '7fffd4',
azure: 'f0ffff',
beige: 'f5f5dc',
bisque: 'ffe4c4',
black: '000000',
blanchedalmond: 'ffebcd',
blue: '0000ff',
blueviolet: '8a2be2',
brown: 'a52a2a',
burlywood: 'deb887',
cadetblue: '5f9ea0',
chartreuse: '7fff00',
chocolate: 'd2691e',
coral: 'ff7f50',
cornflowerblue: '6495ed',
cornsilk: 'fff8dc',
crimson: 'dc143c',
cyan: '00ffff',
darkblue: '00008b',
darkcyan: '008b8b',
darkgoldenrod: 'b8860b',
darkgray: 'a9a9a9',
darkgreen: '006400',
darkkhaki: 'bdb76b',
darkmagenta: '8b008b',
darkolivegreen: '556b2f',
darkorange: 'ff8c00',
darkorchid: '9932cc',
darkred: '8b0000',
darksalmon: 'e9967a',
darkseagreen: '8fbc8f',
darkslateblue: '483d8b',
darkslategray: '2f4f4f',
darkturquoise: '00ced1',
darkviolet: '9400d3',
deeppink: 'ff1493',
deepskyblue: '00bfff',
dimgray: '696969',
dodgerblue: '1e90ff',
feldspar: 'd19275',
firebrick: 'b22222',
floralwhite: 'fffaf0',
forestgreen: '228b22',
fuchsia: 'ff00ff',
gainsboro: 'dcdcdc',
ghostwhite: 'f8f8ff',
gold: 'ffd700',
goldenrod: 'daa520',
gray: '808080',
green: '008000',
greenyellow: 'adff2f',
honeydew: 'f0fff0',
hotpink: 'ff69b4',
indianred: 'cd5c5c',
indigo: '4b0082',
ivory: 'fffff0',
khaki: 'f0e68c',
lavender: 'e6e6fa',
lavenderblush: 'fff0f5',
lawngreen: '7cfc00',
lemonchiffon: 'fffacd',
lightblue: 'add8e6',
lightcoral: 'f08080',
lightcyan: 'e0ffff',
lightgoldenrodyellow: 'fafad2',
lightgrey: 'd3d3d3',
lightgreen: '90ee90',
lightpink: 'ffb6c1',
lightsalmon: 'ffa07a',
lightseagreen: '20b2aa',
lightskyblue: '87cefa',
lightslateblue: '8470ff',
lightslategray: '778899',
lightsteelblue: 'b0c4de',
lightyellow: 'ffffe0',
lime: '00ff00',
limegreen: '32cd32',
linen: 'faf0e6',
magenta: 'ff00ff',
maroon: '800000',
mediumaquamarine: '66cdaa',
mediumblue: '0000cd',
mediumorchid: 'ba55d3',
mediumpurple: '9370d8',
mediumseagreen: '3cb371',
mediumslateblue: '7b68ee',
mediumspringgreen: '00fa9a',
mediumturquoise: '48d1cc',
mediumvioletred: 'c71585',
midnightblue: '191970',
mintcream: 'f5fffa',
mistyrose: 'ffe4e1',
moccasin: 'ffe4b5',
navajowhite: 'ffdead',
navy: '000080',
oldlace: 'fdf5e6',
olive: '808000',
olivedrab: '6b8e23',
orange: 'ffa500',
orangered: 'ff4500',
orchid: 'da70d6',
palegoldenrod: 'eee8aa',
palegreen: '98fb98',
paleturquoise: 'afeeee',
palevioletred: 'd87093',
papayawhip: 'ffefd5',
peachpuff: 'ffdab9',
peru: 'cd853f',
pink: 'ffc0cb',
plum: 'dda0dd',
powderblue: 'b0e0e6',
purple: '800080',
red: 'ff0000',
rosybrown: 'bc8f8f',
royalblue: '4169e1',
saddlebrown: '8b4513',
salmon: 'fa8072',
sandybrown: 'f4a460',
seagreen: '2e8b57',
seashell: 'fff5ee',
sienna: 'a0522d',
silver: 'c0c0c0',
skyblue: '87ceeb',
slateblue: '6a5acd',
slategray: '708090',
snow: 'fffafa',
springgreen: '00ff7f',
steelblue: '4682b4',
tan: 'd2b48c',
teal: '008080',
metle: 'd8bfd8',
tomato: 'ff6347',
turquoise: '40e0d0',
violet: 'ee82ee',
violetred: 'd02090',
wheat: 'f5deb3',
white: 'ffffff',
whitesmoke: 'f5f5f5',
yellow: 'ffff00',
yellowgreen: '9acd32'
};
Add a physics component that includes gravity and bounce and friction
Currently Crafty will draw something when ever the change event is called. This means
ent.x += 5;
ent.y += 5;
Will draw the entity twice. One solution is to just set a boolean flag to true
on the change event and only draw it on enterframe if flag is true.
Canvas drawing (at least in Firefox 3.6; it seemed to work without issue in Chrome 8) and the bounds defined by areaMap can become wildly offset from where they are expected if an object repeatedly moves to new x,y positions that are not integers. I'm doing programmatic animation over time that frequently results in sprite positions being set to non-integer values.
The cause seems to be from comparisons between the modified values returned by pos() and other values that remain unmodified.
A fix that seems to work for me is to move the Math.floor() calls into the setters:
this.defineSetter('x', function(v) { this._attr('_x', Math.floor(v)); });
That may create other issues, though. If at all possible, I think that it would be best to allow non-integer values everywhere, but I'm not experienced enough with canvas to know if this is possible cross-browser.
Rotation should affect the points in a polygon
Currently there is an instance for each audio file and this is due to browsers not handling many instances of Audio
objects very well. Crafty should therefore create as many instances as needed so that the same sound can play at the same time.
Seeing as most components were written fairly quickly, they aren't commented very well. Go through the code and add some good commenting.
47% minification is too small. Try to optimize the size.
Needs more research.
Keep a global collection of assets used by the loader and other components can check if it's been loaded first. Also handy for the builder.
Recalculate Crafty.window
and Crafty.stage/viewport
(if set to fullscreen) when the window resizes.
Crafty relies on the onkeyup call. If I switch tabs while using the arrows/whatever keys, the player object continues to move until i press&depress the same key again.
It might be better to instead attach a onkeypress to the document.documentElement (not window for crossbrowser compat)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.