Forums » Impact Engine » _rscreen offset for drawing?

I have a sidescroller where game.screen.x is continuously increasing.

For image and animation draw() functions I have to specify an offset of ig.game._rscreen to bring those elements in screen. They get drawn somewhere else entirely otherwise. The issue does not occur if the game.screen. does not move

Any ideas why this needs to be done/ fix?

draw:function(){
        
        this.trail1.update();
        
        this.dragonJaw.draw(this.pos.x - ig.game._rscreen.x + 130,this.pos.y + 100);        
        this.trail1.draw(this.pos.x - ig.game._rscreen.x - 140,this.pos.y);
        
        this.parent();
    }

ig.game.screen.x/y is an offset. Normally the screen would be positioned at point (0,0) in the world. If your game scrolls then you need to look at other points in the world, right? So as this offset changes, so does the point in the world at which the "camera" is viewing.

Example:
Let's say you have an entity at point (0,0) in the world, but the screen is set to point (9999,9999). If you don't use the screen offset, then your entity will be drawn at point (0,0) onto the canvas (visible!!) even though the screen is really far away from it.

This offset keeps entities relative to the screen/camera/viewpoint so that entities are shown only when they should be, and hidden when they should be too.

PS: ig.game.screen and ig.game._rscreen are basically the same. The latter is simply rounded.

Right, so I'm offsetting the current entity's pos.x by the ig.game.screen.x value. Why do I need to do it again when I use pos.x in draw function

Here's a snippet of the entire code. ig.game.gameSpeed factors in the moving of the screen in this.pos.x

Spawned at

this.spawnEntity(EntityReddragon,this.screen.x,100);

EntityReddragon

update: function(){
		this.parent();
        
        this.pos.x = this.pos.x + ig.game.gameSpeed + this.speed;
        
	},
    
    draw:function(){
        
        this.trail1.update();
        
        this.dragonJaw.draw(this.pos.x - ig.game._rscreen.x + 130  - 275,this.pos.y + 100);        
        this.trail1.draw(this.pos.x - ig.game._rscreen.x - 140  - 250,this.pos.y);
        
        this.parent();
    }

Quote from superprat
Right, so I'm offsetting the current entity's pos.x by the ig.game.screen.x value. Why do I need to do it again when I use pos.x in draw function

What do you mean "again"? You only do it once, when you draw.

Edit:

You did not have to spawn the entity at (ig.game.screen.x,100). You could have spawned it anywhere you want. It's only (usually) necessary to use in draw.

i'm setting the position for the entity in the update function with the offset, so when I draw the image using the entities position I need to offset it again?

Try to remember it this way:

If the game requires scrolling, then you must offset by ig.game.screen when you draw things.

You should not be updating the position of your entity with ig.game.screen unless you have a good reason for doing so.

I figured it out after quite a bit of trial and error:

- When specifying positions for entities via pos.x or pos.y you need to offset by ig.game.screen

- When using any direct draw function on either an animation or image there is no need to specify the offset of ig.game.screen as the draw function draws directly on the canvas without considering ig.game.screen

This thread is a bit confusing, so forgive me if I am just reiterating things, however, from what I can observe you should be thinking about all this a bit differently.

For starters, you need to think about co-ordinates in 2 groups, game space and screen space.

Game space is absolute and should be considered the gold standard for where things are positioned. Forget about scrolling for a minute here, your level (you said it scrolls) is say 3000px wide. This means that your entity could be positioned anywhere within an x value of 0px and 3000px.

The entity's `pos` object should reflect this absolute position:

entity.pos.x = 2000; // game world, absolute coordinates

The next set of coordinates you need to think about are relative to a `camera` view. After all, you have to project a part of the game world onto a canvas to display it. This is where both `screen` and `_rscreen` come into play. They are used for the draw calls to correctly offset things to display as relative to the display.

As stated earlier, `_rscreen` is simply a rounded version of `screen`; it prevents weird pixel rounding issues when drawing.

For example, if your display/window/canvas is only 300 pixels wide, you obviously can't fit your entire level onto this screen space, therefore, it will need to scroll, and an entity that is positioned at 2000px on the x axis, will obviously be "off-screen". Thus, you use `screen` and `_rscreen` as a way to offset positions of entities so they can be drawn in relation to where viewport/canvas/screen position is.

Yup your absolutely correct. I was facing some confusion but I figured the following

When you use a draw call on an image/ animation it is on the canvas i.e screen space, not on the game space. While setting the position on an entity it is on the gamespace.

I suppose it might be obvious for some people :P I just struggled with it a bit as I was positioning the draw calls as per gamespace and that left me perplexed as to why the images/animations didn't show.

No worries, just trying to help out where I can :)