requestanimationframe should be used for gamejs/time. gamejs/time is already prepared to work with it (in fact, that's why it looks so strange).

i'm unsure if it's too early to implement it - browser support good enough? how much work to test?

https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

http://hacks.mozilla.org/2010/08/more-efficient-javascript-animations-with-mozrequestanimationframe/

http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

https://gist.github.com/838785tw

It uses collideRect, but better is to make it customizable, the same way as for spriteCollide.

When I try to scale image of size 499x640 to 800x600 its bottom is cropped.

I'm using following code to accomplish this:

  var display = gamejs.display.setMode([800, 600]);
  var img = gamejs.image.load(path);
  var dims = img.getSize();
  var simg = gamejs.transform.scale(img, [800/dims[0], 600/dims[1]]);
  display.blit(simg);

I believe it has something to do with float rounding because slightly higher or lower values gives different results (no cropping).
I can provide complete example if required.

allow loading svg images - investigate if all target browsers support it

The new Surface is considered a child of the original. Modifications to either Surface pixels will effect each other.

[[ not yet in gamejs: Surface information like clipping area and color keys are unique to each Surface. ]]

http://www.pygame.org/docs/ref/surface.html#Surface.subsurface

i had people complain about this because they are so used to requirejs

it's a PITA that gamejs prevents default from ALL keys so you can't write anything into an

otoh it's useful for SPACE, which would scroll the page or "/" which would open a search field.

a small project managment thingy like pygame.org pyweek.org have

• title
• description
• download links
• comments

--- vectors.js.orig 2011-06-05 00:30:55.000000000 +0700
+++ vectors.js 2011-06-05 17:13:36.000000000 +0700
@@ -27,7 +27,7 @@

• multiply vector with scalar or other vector
• @param {Array} vector [v0, v1]
• @param {Number|Array} vector or number
  • * @param {Number|Array} result
  • * @returns {Number|Array} result
    */
    exports.multiply = function(a, s) {
    if (typeof s === 'number') {

tell them where / how they can get a compatible browser

Examples try to include a missing script:

File: gamejs/examples/examples-draw/index.html

<script src="../skeleton/public/yabble.js"></script>
<script src="../skeleton/public/gamejs.min.js"></script>

gamejs.min.js does not exist.

The following code in draw.js

// line 653 of gamejs.js
var m = matrix.translate(matrix.identity(), rDest.left, rDest.top);
m = matrix.multiply(m, src._matrix);
this.context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);

add an unecessary dependancy in code, and could be replaced by:

this.context.translate(rDest.left, rDest.top);

Every example seem to still work, but some unit test (not all of them) of rotation and scale seem to break, maybe some refactoring will be needed with transform.js.

Talking about matrix, if such module exists it should not be so coupled to the transformation matrix (add and multiply ,method only work with one dimension matrix with a definite number of arguments which just break reusability of the module), but moved where specific transform are made.

Hi,

I noticed that rect.x and rect.y are missing. They're useful attributes from pygame.Rect, which if there would make porting a little easier. Also, I just like typing r.x rather than r.left.

Not really needed though.

cu.

http://docs.gamejs.org/gamejs/mask/

or is git bash good enough?

i would expect the same index.html file to work with the dev server as well as in the static version produced by the statifier.

but a custom index.html does not work at all with the statifier

should operate on same map data as astar

Would it be possible to do this?

    this.image = gamejs.image.load("images/hex/hexagon1.png");
    this.mImage = mask.fromSurface(this.image);

    return this.mImage.collidePoint(event.pos); 

Thank you.

see sea.js or requirejs

// http://lifesinger.github.com/lab/2011/remove-comments-safely/
function removeComments(code) {
return code
.replace(/(?:^|\n|\r)\s_/_[\s\S]?_/\s(?:\r|\n|$)/g, '\n')
.replace(/(?:^|\n|\r)\s_//.*(?:\r|\n|$)/g, '\n');
}

https://github.com/seajs/seajs/blob/master/src/fn-define.js

What the subject says :)

Hi,

there is a typo in the code here;
http://gamejs.org/animation-and-spritesheet/

imgsize should be imgSize

In this line:
surface.blit(image, imgsize, rect);

should be:
surface.blit(image, imgSize, rect);

Gamejs worker is for me a set bad practice and misguiding for people not familiar with worker.

Intro:

Gamejs worker is basically create another instance of gamejs in a javascript Web Worker.
When you look at gamejs source code, you can see in several reference at different places to gamejs worker. This behavior is similar to application environment. Still a worker is not an environment, and neither an application clone.

Heavy and useless loading

Instantiating a "heavy" worker with lots of features is not an issue, but when cloning the application in a worker the user has access to lot of component that:

• he will not use (why load it, if you don't need it)
• he should not use (e.g. Display, mixer, ...)

Computation performance

A simple worker calculate prime number (ref: gamejs/example/worker) ~4 time faster than gamejs worker implementation.

Below is a simple bench:

• time counter starts at the beginning of the worker file,
• time is logged every time a prime number is found.

// Simple worker

1. 181ms
2. 281ms
3. 387ms
4. 495ms
5. 608ms

// GameJs worker

1. 557ms
2. 968ms
3. 1386ms
4. 1832ms
5. 2291ms

(Instanciation of simple worker is also faster because in actual gamejs Worker implementation, gamejs worker re-instanciate the whole application !)

Coupled and not reusable:

GameJs worker creates a blob that use yabble require implementation and thus is not reusable by people who don't wanna use yabble or this precise implementation.

Misguiding for new-comers:

One of gamejs purpose is to be light and simple to use.
For people who never used advanced concept such as worker and don't go read library source code, they could easily imagine that performance are already optimized and consider that gamejs implementation as their standard.
This is like teaching bad practice.

math module name could be quite confusing as long as it's very similar to Math.
Also it's a very wide name for the function it contains.

I would suggest utils/geometry.js, but maybe we could find better name.

http://stackoverflow.com/questions/7825448/webkit-issues-with-event-layerx-and-event-layery

http://groups.google.com/group/gamejs/browse_thread/thread/584ef6cdac1f37f3

we already have a build step, so providing it as something usable with requirejs shouldn't be too hard.

there's even a converter script for cjs->AMD shipping with requirejs.

the best idea would probably be to produce one gamejs.min.js, which is plain commonjs and one gamejs.min.amd.js, which can be loaded by AMD loaders.

We talked a bit about it on irc a month ago,
to recall the main lines:

At some point you can have an advanced game that require lots of resource because of heavy graphics many layered elements.Having multiple layer element and implementing dirty redrawing can be very time consuming and require a complex architecture (not easy to maintain).

I actually experienced it when I wrote a rpg where I used a particule engine to generate blood explosion where blood stayed after explosion uppon the background but behind the main character.
To fix my problem I had to sacrifice my lazy redrawing and spend several days changing my game logic.
With multiple canvas I could have move background to a another canvas, and apply those blood explosion on the background canvas.

This technique also spare performance because if you have a fancy background it will not repaint it on every frame (at least not by js)

Note that we can simply keep single canvas by default, and people who would do advanced game could use this feature just by updating simply option in a constructor.

http://www.pygame.org/docs/ref/sprite.html#Sprite.groups

Return a list of all the Groups that contain this Sprite.

this is currently a hidden property _groups. I would make it a function, wich should return a copy of the list of groups. A copy is required since modifying the groups via this list is not supported.

http://www.pygame.org/docs/ref/sprite.html#pygame.sprite.collide_circle

pygame.sprite.collide_circle
collision detection between two sprites, using circles.
pygame.sprite.collide_circle(left, right): return bool
Tests for collision between two sprites, by testing to see if two circles centered on the sprites overlap. If the sprites have a "radius" attribute, that is used to create the circle, otherwise a circle is created that is big enough to completely enclose the sprites rect as given by the "rect" attribute. Intended to be passed as a collided callback function to the *collide functions. Sprites must have a "rect" and an optional "radius" attribute.
New in pygame 1.8.1

This happens when trying to preload images.

The offending code:

  RESOURCES[res] = ($g.resourceBaseHref + '/' + res).replace(/\/+/g, '/');

So far as I can tell, $g isn't defined anywhere

Also I wanted to mention that with leaving 3rd param (fps) blank...
application fails without any errors. As I read in the docs (
http://docs.gamejs.org/gamejs/time/index.html#fpsCallback ) — it
should work with using default fps rate.

http://groups.google.com/group/gamejs/browse_thread/thread/52580127222f9b21

this would be useful for displaying "browser is too old", etc messages to enduser

as well as showing and explaining yabble problems or just JS exceptions to game developer

similarly to what php and pygame have

Hi,

scale(s,[10,10]) modifies the input s. Whereas it should return a new scaled surface, not modify the input.

Using scale(s.clone(),[10,10]) to copy input first is a work around.

currently they can't be used with out rect/sprite and are scattered around those two

especially now that we have worker events, this is very handy:

• pygame.event.get(): return Eventlist
• gamejs.event.get(type): return Eventlist
• gamejs.event.get(types): return Eventlist

If a type or array of types is given only those messages will be returned and removed from the queue.

When constructor param is an array (of dimensions), SurfaceArray depends on display module. I think we should only be able to inject a surface.
To me, display refers more to the canvas and should not be injected (c.f. noise example) or used on a static call (using array param).

The actual bahavior allow somebody to write:

display = gamejs.display.setMode([800, 600]);
surface = new gamejs.Surface([200, 200]);
displayArray = new gamejs.SurfaceArray([100, 100]);
// use some pattern to modify surface
// displayArray.set([..]);
SurfaceArray.blitArray(surface, displayArray);

When I read the code above and see the result I feel like:
"WOW, Somehow I get noise out of my display (canvas) image data on my surface, what is this dark magic ?"

Is there any particular reason for that ?

Suggestion of a more proper use would be:

displayArray = new gamejs.SurfaceArray(display.getSurface());
// OR
displayArray = new gamejs.SurfaceArray(someSurface);
// I don't like the following because it will create a surface behind the scene which simply break Inversion Of Control.
displayArray = new gamejs.SurfaceArray([100, 100]);

I think the name is event is a bit tricky, when I personally think off application event more than system event.
Also in pygame the class is named Key.

currently it's not possible to only fill an area of the surface, only the whole surface

currently only one set of assets can be preloaded before ready() is executed. for large games it would be useful to be able to load additional resources after the game is already initialized (e.g. for loading the next map assets).

API RFC

calling preload() after initialization triggers another async preloader. Once all assets were loaded, an event PRELOAD_SUCCESS or PRELOAD_ERROR is triggered.

the preloadId returned by preload() and in the resulting event is there, in case the game triggers multiple preload()s and needs to differantiate which one was finished:

// in game code:
var preloadId = gamejs.preload(['./images/foo.png']);

// in event handler:
if (event.type === gamejs.event.PRELOAD_SUCCESS) {
       gamejs.log('Loaded assets ', event.preloadId);
}

I made a new tilemap class, I invite you to take a look:
https://github.com/Incubatio/gamecs/blob/master/src/lib/tilemap.coffee

In addition to the old tilemap example I added another one :)
http://incubatio.github.com/gamecs/sc-examples.html#tilemap2

letters that have parts hanging below below the baseline, like 'g', 'j', 'y', get cut off on some fonts (Arial, Aharoni, etc) when rendered with gamejs.font

RenderUpdates

A sprite group that's more efficient at updating. This group supports drawing to the screen, but its draw method also returns a list of the Rects updated by the draw (and any clears in between the last draw and the current one). You can use gamejs.display.update(group.draw(screen)) to minimize the updated part of the screen. This can usually make things much faster.

http://www.nongnu.org/pygsear/doc/api_html/private/pygame.sprite.RenderUpdates-class.html

grm

http://www.opensource.org/licenses/mit-license.php

using workers is currently too hard. provide something like ringo's WorkerPromise possibly based on this code:

https://github.com/BigIroh/Ozai/blob/master/ozai.js

current skeleton is crap. it references ../gamejs.min.js, has too much css/html

make something decent.

we won't be able to support exactly what pygame has BLEND_ADD, BLEND_SUB, BLEND_MULT, BLEND_MIN, BLEND_MAX new in 1.8.1: BLEND_RGBA_ADD, BLEND_RGBA_SUB, BLEND_RGBA_MULT, BLEND_RGBA_MIN, BLEND_RGBA_MAX BLEND_RGB_ADD, BLEND_RGB_SUB, BLEND_RGB_MULT, BLEND_RGB_MIN, BLEND_RGB_MAX

but canvas API specifies its own list of blending operations: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html?style=highlight#dom-context-2d-globalcompositeoperation

the docs should take extra care to explain what they do!

rewrite to use gamejs.objects.accessors

this is due to this (scroll a bit down): http://diveintohtml5.org/canvas.html#paths

If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line's direction.

gamejs could internally fix all pixel coordinates to +0.5 (processingjs does that) but i don't like it :|

I strongly believe that gamejs overuse module and should use more class instead.
I would also add static class for object that have static method instead of allocating it to exports.
actual code:

// ugly class requiring
Display = require('gamejs/display').Display
// and a style even more ugly
gamejs = require('gamejs')
mySurface = new gamejs.Surface()
// strange usage of contants encapsulated in gamejs or sometime from nowhere
gamejs.Event.K_UP
exports.SOME_CONSTANTS
exports.someFunction()

my proposal:

Display = require('gamejs/display')
Surface = require('gamejs/surface')
Event.K_UP
module.someStaticFunction()
//  or
Class.someStaticFunction

Adding globals (in exports) encourage spaghetti programming even if gamejs itself doesn't abuse from its own globals.
I also find trivial using gamejs module from internal gamejs module/class (c.f. gamejs.Event.K_up, or gamejs.Surface). Note that for final user refering to gamejs module to get gamejs component is not a bad practice.

I'm actually refactoring gamecs applying those suggestion.