Wrong POSY for sprite...

DennMonn

Hi.
I just added one sprite to background (one blue image on black BG) and it is not set at the top of the playground! It is moved by 15px down! I tried to add posy:0 - the same bug. When I added posy:-15 - it was at the right place!
Why ? You can see it here: http://www.avizinfo.md/gametest/as001/

Thanks.

selim

This is a bug in gQ, the scenegraph node should be absolutely positioned and it's not. I will create a issue in github for it.

However the reason it hasn't occurred before is that normally there are no other elements before it once the game is started. In your case the loading bar remains. To fix this you could simply do replace those lines (572 to 574):

$.playground().startGame(function(){ $("#welcomeScreen").remove(); });

with

$.playground().startGame(function(){ $("#loadingBar").remove(); });

selim

Oops I just realized that I accepted my own answer... Sorry I didn't mean to do this.

The issue has been created and you can watch it to find out when it's fixed: https://github.com/onaluf/gameQuery/issues/21

DennMonn

Thanks! The $("#loadingBar").remove(); - helped!

Another problem which I can't understand is:
1. I added 2 sprites: (the same image twice, to move the BG in loop). The second is with param posx: PW (PW==PlaygroundWidth)
.addSprite("back2", {animation: bg2,width: PW,height: PH})
.addSprite("back22",{animation: bg2,width: PW,height: PH,posx: PW})
And I get an error: when the second bg (back22) is at position left:0 it disappears!
2. I added an "console log below the playground to see the start position of back2 and back22. Both are 0 !! Why?
Look: http://www.avizinfo.md/gametest/as001/
Both sprites are on the same .css("left")

selim

Since the last version of gQ sprites are positioned with CSS transform (if the browser supports it) instead of CSS' left and top. This is why both your sprites are at left: 0.

The reason for the disappearing sprite is not clear to me, let me check your code and get back to you!

DennMonn

Thanks. I'm sorry, I didn't read the migration guide... I know why the sprite disappear, because I still use the old method of move, with css-left. So, both sprites disappear because they go to their start position - outside of playground.

DennMonn

Hi. I have read the API again and I want to use the w(), or wh() functions... But they resize the sprite only, not images that are associated with sprites. Is there a way to resize the images together with sprites?
Thanks.

selim

If you want to change the size of the sprite in the sens of zooming the animation it holds you should use .scale() (http://gamequeryjs.com/documentation/api/#scale)

DennMonn

Hi.
Thanks. I'm trying to use .scale()
But the position of the scaled elements are wrong: http://www.avizinfo.md/gametest/as001/

As you can see, I try to start from 800x600 size. If the screen is smaller, I resize the playground, e.g. to 480x320. In this case the elements (images) which are made for 800x600 size, should be scaled to 480/800=0.6

I added just one sprite (image, width=800). The playground is resized well. But the sprite is not resized well, the image is cropped (the trees should be centered), also it is not at correct place: top:0 and left:0...

Also, if I will set the second argument to false, an error appear in console: TypeError: this[0] is undefined Line 1 http://cdn.gamequeryjs.com/jquery.gamequery.min.js

Can you help me to understand what I'm doing wrong?
Thanks.

DennMonn

Hi
Are you planning to work on https://github.com/onaluf/gameQuery/issues/21 ?
I added a comment there... I'd like, when an element is scaled with scale(), it should be positioned at 0,0. Now it is positioned at center-bottom. Also, I need to apply scale() to an image before to add it to sprite! Is this possible (otherwise it is cropped!)?
Thanks.

selim

Hi, there are two problems with your approach:
1) you using scale on the playground is not supported.
2) using scale on elements containing sub-elements is not supported either.

What you can do is set the size of the playground to fit your window, but not scale it.

Scaled elements should be positioned correctly. If they're not make sure you don't use .css to positioned them but .x() .y() instead.

Using scale on a sprite (not it's parent !!!) should not result in a cropped sprite. if it's the case please provide a test case showing this situation.

DennMonn

Thank you for your answer.
I think, you don't understand me.
1. I don't use scale to playground. I calculate the window size and I set PlaygroundWidth=ScrWidth.
2. All images I use are 800px width, for 800px playgroud. If the playground has a smaller width - the image which is added to sprite is cropped, because the playground is smaller. So, I need to scale the image before to add them to sprites...
3. Anyway, when I use scale() to a sprite to make it smaller, it is not positioned to 0,0, but to center-bottom.

Here is my demo: http://www.avizinfo.md/gametest/as001/

1. The top image is added to two sprites: bg1 and back2 with NO POSY.
2. The first sprite is not scaled, but the image is cropped.
3. The second sprite is made with the same image and it is scaled to 0.6. As you can see, it is not at 0,0. And it is cropped also.
4. Both sprites should be at the same bottom line, but the second is lower. I added: $("#back2").xy(0, 0, 0); anyway it is lower...

For this playground (480x320) I should use scaled images, like back2, which should be positioned at 0,0.

selim

Ok I now understand your problems better:

- Your sprites are cropped because you set their size to (480x320) instead of setting it to the size of the image it contains.
- All transformations are done with regards to the center of the sprite. I have no plan in changing this at the moment nor adding an option to do so. It is however quite easy to manually correct this manually.

DennMonn

Hi Selim.
I sent you a private message with link to my game. Please, read. I need your help again.
I don't wish to make this link public, so I sent you a private message.
Thanks.

DennMonn

Hi Selim.
I need your help with optimization.
The game: http://www.avizinfo.ro/gametest/as7/
1. Click on red button (Engine - ON)
2. Click on small UP button, near gear screen (Acceleration-ON)
3. Click on big UP button near acceleration (GEAR++) or big DOWN button (GEAR--)
You will see how the car is moving.
Please, try this on any mobile device (except tabs). You will see that the game is like "overloaded" and the objects move slow... Or, like the FPS is set to 500... The moving processes aren't smooth, they are intermittent (saltatory).

I don't know, what should I to optimize to make it working well (smooth) on mobiles.
Can you help me?
I'm thinking about other game engine, which works with canvas instead of DOM... Will this help?
Thanks.

selim

There is one unoptimal thing I found out in your code: In the refresh callback you do a lot of stuff that should only be done on transition between game state. For example :

$.playground().registerCallback(function(){ // ... if(asPlayer.asPlyAcc==1) //Car rotate state, when acc on or off... { FumeMove.fadeIn(); if(asPlayer.asPlyRotateState>-1) { $("#car1").rotate(asPlayer.asPlyRotateState); asPlayer.asPlyRotateState+=-0.2; } } else { FumeMove.fadeOut(); if(asPlayer.asPlyRotateState<0) { $("#car1").rotate(asPlayer.asPlyRotateState); asPlayer.asPlyRotateState+=0.2; } } // ... }, REFRESH_RATE);

This means the fadeOut and fadeIn function will be called every frame, which is bad. Have a carefull look at the content of your callback because this is the most critical part for performance.

Another good rule of thumb is: In the refresh callback only manipulate the DOM through gQ's own function. This will help achieve good performance

If this isn't enough here is what you can do to findout what part of you code is slow: Try to run the game once without any graphical part and once without physical simulation part. If one of those is fast it means that the other one is causing the slowing down. Then you can focus on this part.