Would be nice to have: a user forum (google groups?) for Quintus

I'm making labyrinth game, I want to insert object / enemy / everything on the blank tile [0], or last tile (winning the game) how to do that?

Update line 163 of touch example to use Q.input.canvasToStageX, include input

Collision detection doesn't work properly on sprites with scaling and rotation, it treats it as if it were not scaled or rotated. I think this is because Q.overlap does not take into account the sprites scale or angle. Is this the intended behavior?

I usually set up my canvas dimensions in code as follows:

index.html:

main.js:
var el = $("#game"); // find element
el.width(500); // force its width to 500
el.height(500); // force its height to same as width
var Q = Quintus().include("Sprites, Scenes, Input, UI").setup("game");

Quintus however seems to disregard this and resizes the canvas to 320 x 400.

To force cache refresh.

When I add multiple enemy in platformer example and wrap it with cocoonjs, the performance sometimes will drop to 20fps. When I kill few enemy and only left around 6 enemies on the screen, the performance might go back up.

links is the sample of the source codes

https://dl.dropboxusercontent.com/u/65841566/QuintusIE10.zip

I think I found a bug in quintus_2d.js (line 213).
I guess it should be:

     blockY <  this.p.rows) { 

instead of

     blockY <  this.p.cols) { 

Sven

Hello, I'm trying to use Tiled and the TMX files to make a level for a proof of concept. I followed the platformer example and was able to add a collision layer very simply and it worked like a charm once I added the collision=true property to the layer. Then I tried to add another Tile Layer through Tiled. Now I'm getting some very funny collision.

My map is 50x50 tiles with the tiles being 32x32 pixels so the map is 1600x1600 pixels. For some reason, once I add the second Tile Layer I can't move my character anywhere within the first 800x800 pixels of the map. Even if I remove the collision=true from the collision layer, I still collide. This is top down style movement so the player can go up, down left and right. No gravity.

I tried forking the code and attempted to find the issue myself, but I'm not familiar enough with how the collision is implemented to figure it out yet. I think it might have something to do with setting up collision points in here: https://github.com/cykod/Quintus/blob/master/lib/quintus_sprites.js#L311

If you can give me an idea of where to start looking I don't mind trying to figure out the problem =)

Note to self to fix in demo game.

Simplify the setup method to handle the 3 scaling variations:

1. exact size
2. exact pixel size, scale CSS up to maximize while keeping aspect ratio and make sure input handles this
3. maximize, scaling up the pixel size

Also see if retina (2x resolution) can be handled and low-power (1/2x resolution) can be handled cleanly.

[[email protected] ~]$ git clone [email protected]:cykod/Quintus.git
Cloning into 'Quintus'...
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,207.97.227.239' (RSA) to the list of known hosts.
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Replace in file Readme the url for git report with this:
git://github.com/cykod/Quintus.git

[[email protected] ~]$ git clone git://github.com/cykod/Quintus.git
Cloning into 'Quintus'...
remote: Counting objects: 630, done.
remote: Compressing objects: 100% (366/366), done.
remote: Total 630 (delta 370), reused 500 (delta 240)
Ricezione degli oggetti: 100% (630/630), 548.54 KiB | 95 KiB/s, done.
Risoluzione dei delta: 100% (370/370), done.

Using debug and debugFill with a TileLayer on the stage renders a single large rectangular collision mesh off to the side, rather than around the collision tiles.

Q.audio.play with cocoonjs might stop working after a while. The music still looping and working but no new sound can be play.

Link of sample (Use cocoonjs launcher to test it)

https://dl.dropboxusercontent.com/u/65841566/QuintusIE10.zip

If you have a tile sprite with many tiles and edit it in a monospace font, it's easier to edit if all numbers have two digits. That way you can follow the columns more easily. Today it looks like this:

[1,2,3,1,5,4]
[11,12,13,14,15,15]

It would be nice if it was also okay to add the tile sprite numbers like this:

[01,02,03,01,05,04]
[11,12,13,14,15,15]

Thanks for a very exciting game platform!

steps to reproduce...

1. replace "Full-featured platformer example"'s level1.tmx with the following file: https://gist.github.com/EvanBurchard/8254341
2. start the game.
3. go to the lowest platform on the map, and start heading left
4. the screen will lock when hitting that platform and the character exits screen left

When I try to make a multi-layered 2d tile map, the only layer that draws on the screen is the collision layer. The other layers either aren't loading or aren't being drawn. Here's the code that fails:

  console.log("bg1");
  stage.insert(new Q.TileLayer({ 
    dataAsset: 'level.tmx', 
    sheet: 'tiles', 
    layerIndex: 'Background',
    tileW: 70,
    tileH: 70
  }));

  console.log("coll");
  stage.collisionLayer(new Q.TileLayer({ 
    dataAsset: 'level.tmx', 
    sheet: 'tiles', 
    layerIndex: 'Tile Layer 1',
    tileW: 70,
    tileH: 70
  }));
  var player = stage.insert(new Q.Player({ x: 700, y: 5000 }));

  console.log("bg2");
  stage.insert(new Q.TileLayer({ 
    dataAsset: 'level.tmx', 
    sheet: 'tiles', 
    layerIndex: 'Background 2',
    tileW: 70,
    tileH: 70
  }));

Note that the player sprite inserts just fine. Also note that this bug is only showing up in the latest git version and not in 0.1.5. Please let me know if there's any more information that I can provide.

Hi,

I'm triing to use the Physics Engine with canvas.

With SVG, it works well like in the "Device Orientation" project.

But in canvas, I have an error :
TypeError: stage is undefined
../lib/quintus_physics.js
Line 138

I tried to fix it in modifing this file but I failed.

Here is my code :

window.addEventListener('load',function(e) {

var Q = window.Q = Quintus().include("Sprites, Scenes, Touch, 2D, Physics");

Q.setup({ maximize: true })
.touch(Q.SPRITE_ALL);

Q.Sprite.extend("rectangle", {
init: function(p) {
this._super(p, { sheet: 'rect'});

   //this.add("2d");
   this.add("physics");
 }

});

Q.scene("start",new Q.Scene(function(stage) {

stage.add("world");

stage.each(function() { 
this.p.type = 'static'; 
this.add("physics"); 
});

  stage.insert(new Q.rectangle({ x: 595, y: 100}));
  stage.insert(new Q.rectangle({ x: 650, y: 500 }));
}

stage.insert(new Q.Sprite({ x: 5, y: 300, w: 10, h: 600 }));
stage.insert(new Q.Sprite({ x: 605, y: 300, w: 10, h: 600 }));
stage.insert(new Q.Sprite({ x: 200, y: 5, w: 800, h: 10 }));
stage.insert(new Q.Sprite({ x: 200, y: 595, w: 800, h: 10 }));

}));

Q.load("rectangle.png", function() {
Q.sheet("rect","rectangle.png", { tilew: 84, tileh: 84 });
Q.stageScene("start");
});

});

By the way, really good job with this API, it will be useful !
Thank you,
Maxime

Forgive me for not knowing the code well enough, but is there a clear place in the code where a renderer is defined?

I am looking to use Pixi for rendering, but am really wary about the major framework (Phaser) that uses it. Quintus is more than enough, aside from having Pixi/webgl support.

For that matter, if there is a clean spot to add/change/remove renderers, I am sure work could be done to get threejs in here too!

When I trying 'npm install' have the errors:

Error: Using '>' with 0.x.x makes no sense. Don't do it.
npm ERR! at /usr/share/npm/lib/utils/semver.js:94:29
npm ERR! at String.replace (native)
npm ERR! at replaceXRange (/usr/share/npm/lib/utils/semver.js:88:25)
npm ERR! at Array.map (native)
npm ERR! at replaceXRanges (/usr/share/npm/lib/utils/semver.js:84:17)
npm ERR! at Array.map (native)
npm ERR! at toComparators (/usr/share/npm/lib/utils/semver.js:66:8)
npm ERR! at Object.validRange (/usr/share/npm/lib/utils/semver.js:138:11)
npm ERR! at install_ (/usr/share/npm/lib/install.js:103:22)
npm ERR! at /usr/share/npm/lib/install.js:77:5
npm ERR! Report this entire log at http://github.com/isaacs/npm/issues
npm ERR! or email it to [email protected]
npm ERR! Just tweeting a tiny part of the error will not be helpful.
npm not ok

npm verstion : 0.2.19
ubuntu verstion: 11.10

First off, great library 👍

My use case was to enable the number pad for entering numeric input. I wanted to be able to map all of the number keys to the same event ('inputNumber' for example) and then determine which key was pressed from the event handler code. I couldn't find a way to do this (no arguments are passed to the event handler unless you call trigger with a second argument of data and "this" points to the Q.input object or something like that rather than the event) so I ended up catching all the events and redirecting them to trigger an event with extra data.

Q.input.keyboardControls({
    48: 'num0',
    49: 'num1',
    ...
});
Q.input.on('num0', function() { Q.input.trigger('inputNumber', { num: 0 }); });
Q.input.on('num1', function() { Q.input.trigger('inputNumber', { num: 1 }); });

This is obviously a hacky approach and I am new to quintus to perhaps I just missed the right way to do this. Is there a way to assign an event handler to all input captured by quintus as that could be used for this use case as well.

Maybe I misunderstood a thing, but I get allways 1 as tile-type. Fact is that where the player stands, in my map-array a 2 present is. What I try to accomplish is easy (so I thought), I want to let the player lift up, if he stands on a specific platform.

As I said, maybe there's a problem in my mind, correct me if that's the fact.

Hey,

I and a few class mates studying media and communication are planning a 2d platform game and are looking at Quintus as a possible engine. It looks great - kudos on your hard work!

Anyway, I noticed that you are planning to add in support for Spriter. Have you perhaps also had a look at Spine (http://esotericsoftware.com/)?

It's a similar idea which we've also been looking at. I haven't looked that closely into Quintus, Spriter or Spine yet, but if the data format of Spriter isn't too different from Spine's, it would be awesome to see support for Spine in Quintus as well.

It seems to me (after looking at the 2D code) that if a tmx uses multiple tilesets (as is allowed by Tiled), it is currently not possible to use that with Quintus. Is there any plan to support that? If not, I would be willing to add that support if it is desirable.

When use Q.audio.play in IE10 the audio lags or delayed around 0.5seconds. When use with Firefox,Chrome this issues does not occurs.

The link is my modified Quintus platformer example with audio. It will lags when play on IE10
Im using windows 8

https://dl.dropboxusercontent.com/u/65841566/QuintusIE10.zip

Note: This occurs not only on iPhone. I've seen that even on iPad and Desktop.

I grabbed a 32x32 tile set from OpenGameArt with a 1 pixel border around everything. So I used these settings:

    Q.sheet("blocks", "blockbreak.png", {
        tileW: 32,
        tileH: 32,
        h: 595,
        w: 199,
        sx: 1,
        sy: 1,
        spacingX: 1,
        spacingY: 1
    });
    expect(Q.sheet("blocks").frames).toBe(108);

But got 114 due to the function using ceil instead of floor. I'm submitting a pull request if you don't think this will break anything else. Added a Jasmine test. Tile originated from http://opengameart.org/content/match-3 and is CC0.

The example Ball don't work in chrome 24.

Currently it is only possible to scale a sprite globally, but looking at the code shows it is easy to add an option to have different values for the scale on X and Y.

A basic way of implementing this would be to replace the line 363 of quintus_sprites.js by:

if(p.scale) { this.matrix.scale(p.scale.x || p.scale || 1, p.scale.y || p.scale || 1);

:) having more examples is more powerfull.

An example is play sound or sprite animation.

Many thanks

I like it 👍

In the page documentation:
http://html5quintus.com/documentation

The link for "Core Quintus Basics" is wrong.

http://html5quintus.com/guide/.md

The change is:
http://html5quintus.com/guide/core.md

Too many questions on this in the community, better to just put something in the codebase.

Hello,

I've noticed that in Core Quintus Basics chapter of Guide accessible on Quintus website is written that up to 3 arguments can be passed to event handlers when triggering some event. It doesn't work. According to implementation of trigger() method in Evented class only one argument can be passed to handlers. IMHO possibility to pass up to 3 arguments would be nice and handy.

Uncaught TypeError: Type error
line 300 ctx.drawImage(Q.asset(p.asset),-p.cx,-p.cy);
It is happens when I run quintus games on chrome in ubuntu 12.10 but localy it is ok.
Anyone have this error?

In the StageSelector, you have implemented each like this:

each: function(callback) {
  for(var i=0,len=this.items.length;i<len;i++) {
    callback.call(this.items[i],arguments[1],arguments[2]);
  }
  return this;
}, 

So that it must be invoked like this,

Q('Enemy').each(function(a, b) {
  console.log(this.className); // Enemy
  console.log("other stuff: %o, %o", a, b);
}, "any", "thing");

In jQuery, each works like this:

$('div').each(function (index, element) {
  console.log(this === element); // true
});

In Underscore, each works like this:

_.each(list, function(element, index, list) {
  console.log(this === window); // true
})

Quintus is a really exceptional project, and I am having so much fun re-implementing Signal in it; however, there have been gotchas. This was one of them. When I am writing javascript and I bang out:

Q('Enemy').each(function(obj) {
  stage.trigger('party', obj);
});

The last thing I expect is for obj to be undefined. When it is undefined, the last place I look is the implementation details of the iterator. It is totally cool to bind this to the element, as jQuery does, but you should also bind the first and second arguments to index and element, rather than any old thing folks please to toss in.

That's my two fruit, anyway.

What it says on the tin. When you press the mouse button, Q.touchInput.touchPos.p.x and p.y take values corresponding to the mouse position. When using viewport from quintus_2d module, touchPos takes a value which is mouse position relative to the stage and not the viewport - which is correct. The bug happens when you keep the mouse pressed and steady while the viewport is moving. Mouse position relative to the stage changes but touchPos stays the same. If you then move the mouse even a little - touchPos jumps to the correct value.

Q.play doesn't start audio (mp3, ogg) in Chrome 24.0.1312.52 on OS X 10.8.2.
Assets loaded by Q.load.

Hi

If the player is falling from the platform, You cant click the Play Again button.
If you win you can click on the Play Again button.

Tested on IE10,Chrome and Firefox.

In quintus._ui.js there's these lines for Q.UI.Button:

highlight: function() {
    if(!this.sheet() || this.sheet().frames > 1) {
       this.p.frame = 1;
     }
   },

But when I check out the result of the sheet() function it doesn't have the attribute frames.

Therefore the highlight function doesn't work.

I don't like json load model for sprite or level.
It possible use array or other ?

With json you can run game only in server really ?

Thank you.

Touch event on mobile is being triggered twice on Android. To test click on any of the numbers (tested on Android 4.1 browser), it will show the number twice:

http://static.pablofarias.com/racinggame2/

May have to do with the way I'm using the viewport. What I want to achieve is to fit to width of the device without showing more of the game world. Using maximize: "touch" shows a blank screen on my phone, using maximize: true, messes up the alignment of the GUI and the background (the link above only has the GUI. I'll be releasing the full game once finished in a blog post).

(basically I just want to re-scale the entire game to fit the screen, the way it happens in LimeJS for instance, without showing extra parts of the level)

Greetings!

it looks like 5b517af broke the platformer example. You can no longer reach the tower because you cannot progress far enough left.

I modified the level because I thought something might be wrong with jumping (hitting a ceiling or something), but you just can't walk far enough left to get to the goal. The attached screenshot shows where you stop.

See G+ Discussion

In the load function:

this.p.w = this.p.rows * this.p.tileH;
this.p.h = this.p.cols * this.p.tileW;

I think this should be:

this.p.w = this.p.cols * this.p.tileW;
this.p.h = this.p.rows * this.p.tileH;

I think opening a new window when you clicked on 'chapter' in doc on official site is not very usefull. It is not google, i dont want back, i want just see the chapter content without extra moves. It's a bit annoying. For example on http://html5quintus.com/documentation#.UaUM7mSH60w
Thanks.

So this script has support for platform games (platformers).
For the game I want to make I need support for puzzle platform, where up and down result in a direction instead of action jumping and ducking.

Reading through the source code, I found out that it probably something has to do with 2d and platformerControls. And for ai with aiBounce.
Without any comments it's hard to understand what it all does :(

Any change that this will be supported?
Or can anyone point me in the right direction, I have no problem with writing Javascript.

Keep up the great work.

I do not understand how the alignment of UI-Labels should work.
If I attach two UI-Labels with different label-text into the same UI-Container, then I expect that the Labels are both left aligned.

But that is not what happens.
The draw method of the UI-Labels draws the label with a "-this.p.cx" which is different for the two UI-Labels.

Is it possible to make UI-Labels left aligned according to a point?

Hi, i'm working with animation..

I have added to code "plataformer" this:

Q.animations('player', {
left: { frames: [0,2], rate:1/2},
right: { frames: [0,1], rate:1/2},
stand: { frames: [0,0], rate:1/2}
});

I have added animation on player:
this.add('2d, platformerControls, animation');

I have added function:
step: function(dt)
{
if(this.p.vx > 0) {
this.play("right");
} else if(this.p.vx < 0) {
this.play("left");
} else {
this.play("stand");
}
}

And i have this error:
Cannot read property 'rate' of undefined

The images used in animation are:

The json player:
"player": { "tilew": 30, "tileh": 30, "sx":0, "sy": 0, "w": 90, "h": 28 },

Thank you !

For Example on this page the Run the example link doesn't work.