Forums » Impact Engine » Velocity, font question and suggestion from me

Hello dominic, I made some kind of researches and wrote some code and i discover some strange things.

First thing is velocity of entities which are working correctly for me. I tried to wrote shooting thing which is spawn entity with correct angle and velocity.

I didnt have any problem with angle. But velocity worked strange for me.
This is the code:

this.vel.x = (Math.cos(this.angle)) * this.speed;
this.vel.y = (Math.sin(this.angle)) * this.speed;

When i used this code and when i had this.speed with 100, and when i shoot in game in some angles my bullet flew into the corner and it didnt flew to my cursor.
But when i used this code:

this.pos.x += (Math.cos(this.angle)) * this.speed;
this.pos.y += (Math.sin(this.angle)) * this.speed;

Everything is correct and perfect.

Second thing is a question about impact font class. I tried to render text with fillText function and i compere it to the impact font rendering and i get meybe 1ms of difference (in older browser it was bigger) but i want to ask why didnt you used fillText function for impact font class? This is faster a bit and easier i guess.

And last thing isnt question, but suggestion. I tried to do it by myself but with no luck. Its about drawing things the same in every frame. I mean this is pointless, in background-map case this map isnt changeing at all, and this is very very heavy to draw, so some kind of thing like drawing bg-map once would be great stuff.

I think this is possible in certian ways. But i tried html5/js implemented way to do it but without luck, so i give it up to you.

// Sorry if i wrote something wired, i dont know english too good.

The velocity problem is odd. Do you have an example of this online somewhere?

One note though: if you manipulate this.pos directly, always factor in the tick - the time since the last frame in seconds. This ensures that the entity moves with the same speed, regardless of the framerate.

this.pos.x += (Math.cos(this.angle)) * this.speed * ig.system.tick;
this.pos.y += (Math.sin(this.angle)) * this.speed * ig.system.tick;

Using this.vel does this automatically.


ig.Text uses bitmap fonts to ensure that it looks exactly the same in every browser and to be able to easily use custom (non-system) fonts. I never compared the performance of both, but I guess it depends heavily on the browser which one is faster.


Using dirty rects instead of just redrawing the whole screen for each frame makes some things incredibly difficult. Also, many games wont benefit from this at all, i.e. those with constantly scrolling backgrounds.

Redrawing the whole frame is the right way to go. I would be surprised if any modern 2d games (e.g. those for xbox live) use a dirty-rect technique. It's the job of the browser vendors to make <canvas> fast and a JavaScript library is not the right place to fix (or rather work around) drawing performance issues of the browsers. That's a big imho :)

That said, there is a preRender mode for background maps, that improves drawing performance, especially on mobile devices. I hope this mode wont be needed anymore in the near future. iOS5 will have hardware acceleration for <canvas> and desktop browsers are typically fast enough already.

OK, i have put examples online.

First one with use of this.val variable:
Example with use of this.val

Second one with this.pos and without tick cause its make my bullet much slower...
Example with use of this.pos

I also understand now you point in making font this way. Custom font are easier to use without any problem with importing or so... But what i see is that the fonts by fillText in win7 and Android are well rendered and pretty the same.

What about drawing background one is a great speed up for older versions of browsers, and my point is that people wont update theirs browsers. And this i what i'am afraid of, because they wont play my game.

Anyway i put away researches and i'am going straight to write some interesting game mechanics. And i forget to add, I can saw first time in my life how the game engines works and learn it, so big thanks for a great product :)

The tick is the time in seconds that have elapsed since the last frame was rendered. If the browser runs the game at 60FPS, that value is around 0.016s (1s/60fps = 0.016s). You have to increase your this.speed to account for that. Setting your this.speed to 100 will result in 100 pixels per second.

The reason your entities stop in the corner, is because they collide with your collision map. If you use this.pos directly, you ignore the collision map entirely. If that&039;s what you want, using #this.pos is fine.


If you care about people who don't update their browsers, use Flash :)

But seriously, dirty rects are incredibly hard to do right. I believe that it's not worth the effort. Even more so in near future.

One thing you can try, if you have a fixed background: give the <canvas> Element a background-image: bg.jpg CSS rule and set your Game&039;s <1> to #null (transparent). This will make the CSS background "shine through" your game. It may be faster, depending on the browser you're using.

Sorry i didn't present problem well.

I mean that the bullets with this.vel variable in use, they are flying like in wrong direction and this problem have nothing with collision, also its not about angle of bullets.

When i use the same Math.sin and Math.cos methods with this.pos bullets are flying well but with this.vel just like in this ss: ScreenShot

PS. ive changed example with this.val. example

Ah Ok, that&039;s another problem. Your Entity's speed is limited to <1>. Set those to something higher, or your .speed to something lower. I.e. #this.maxVel.x and this.maxVel.y must at least be as big as this.speed.