RESOLVED - Graphics Bug - Pixel Art - Non Interpolate Color Between Pixels issue

B

BLB

Guest
Hello,

So I am programming a pixel art platformer game in my spare time. I recently started learning GML and GMS. However I have run into an issue with the graphics. Currently while I creating the body of the game like movement, etc I am using a square to simulate my player and enemies.

In the following pictures the Green guy is the player and the pink stuff is the flooring, and walls.

Normally my player would would like this.



You can see that the black lines look really nice and crisp. But when I jump and fall onto the floor I noticed I started getting something like this.



As you can see the bottom line is in the floor slightly. So I thought that this could be caused by my collision detection but before I even went back to the code I noticed this happening sometimes when I hit the floor.



As you can see the top and bottom line are both slim and smaller than the side lines. I though that perhaps it was the Interpolate Color Between Pixels setting. I went into global game settings and changed this for all platforms. I returned to it and I found the same thing happening.

I only have Windows 10 machines (3 to be exact) and this happens on all of them. I thought it may just be my laptop but I get the same thing on my gaming machine with a high end nvidia card.

Here is my code:
In my player create I have
Code:
///Attributes
gForce = 1;   // Gravity Force
hsp = 0;     // Horizontal Pixel Movement
vsp = 0;     // Vertical Pixel Movement
jSpeed = 15;     // Jump Speed
mSpeed = 8;     // Movement Speed
I then have a step event and have the following code there
Code:
///Movement Controls

// +----------------------+
// | Version 1.0          |
// | Last Update          |
// | Built Basic Movement |
// +----------------------+

//Get player input
key_right = keyboard_check(vk_right);
key_left = -(keyboard_check(vk_left));
key_jump = keyboard_check_pressed(vk_space);

//-------------------Start of movement algorithm--------------------------------\\

//Calculate left/right movement
move = key_left + key_right; //Ex. (-1) + (0) = -1; (-1) + (1) = 0; (0) + (1) = 1
hsp = move * mSpeed;

//Apply Gravity
if(vsp < 10)
{
    vsp += gForce;
}

//Check Jump input
if(place_meeting(x, y + 1, par_wall)) //If place below player is floor
{
    //Perform jump
    vsp = key_jump * -(jSpeed); //Ex. 1 * -(jump speed)
}

//Horizontal Collision Check
if(place_meeting(x + hsp, y, par_wall)) //Is there something in front of us?
{
    //There is, so move as CLOSE to it as possible
    while(!place_meeting(x + sign(hsp), y, par_wall))
    {
        show_debug_message("Collision Detected on X");
        x += sign(hsp); //Move one more pixel in current direction
    }
    //Do not move any further to left or right
    hsp = 0;
}
x += hsp;

//Vertical Collision Check
if(place_meeting(x, y  + vsp, par_wall)) //Is there something in above or below of us?
{
    //There is, so move as CLOSE to it as possible
    while(!place_meeting(x, y + sign(vsp), par_wall))
    {
        show_debug_message("Collision Detected on Y");
        y += sign(vsp); //Move one more pixel in current direction
    }
    //Do not move any further to up or down
    vsp = 0;
}
y += vsp;

//-------------------End of movement algorithm-------------------------------------\\
Does anyone have an idea of what I need to do to fix this or an idea of how to figure out what is going?

Thanks,
BLB

+---------------------------------------RESOLUTION---------------------------------------+
Normally, rounding your position is supposed to solve such issues. Have you made sure that you round your position after all movement is done and done?
Put "y=round(y);" at the end of your "end step" event or put such event if you haven't. This way you sure its the last thing that happens.

If that doesn't fix the problem, it MIGHT be a scaling issue. What is your view size/port size vs the resolution of the monitor you display your game in? Also, what are your global settings regarding scaling? "keep aspect ratio" or "fullscale" ?
Issue was that I had a view in my test room that was causing this issue.
 
Last edited by a moderator:
A

Aura

Guest
Welcome to the GMC~♫

Please provide more information about what you're doing, that is, post the code that you are using. ^^
 

Carnivius

Member
Do your movements/collisions/co-ordinates use numbers with decimal points during the game? If so then you could try using floor(x) and floor(y) when you are drawing the sprites to make the drawing positions into whole numbers.
 

Ninety

Member
Do your movements/collisions/co-ordinates use numbers with decimal points during the game? If so then you could try using floor(x) and floor(y) when you are drawing the sprites to make the drawing positions into whole numbers.
Used to have the exact same problem when I made platformers. Started rounding x and y and the problem went away.
 

Phil Strahl

Member
Also, when you are comparing two values, make sure to use the right comparison operator. E.g. if you have something along the lines of
Code:
if (player_y > floor_y)
{
   // stop the player instance at current Y, etc.
}
then your player still drops one pixel down further. To avoid this use the >= comparison operator:

Code:
if (player_y >= floor_y)
 
B

BLB

Guest
Thanks for all the great suggestions. I will try to test them out now. I wanted to paste my code first real quick.

So in the create I have this code.

Code:
///Attributes
gForce = 0.5;   // Gravity Force
hsp = 0;     // Horizontal Pixel Movement
vsp = 0;     // Vertical Pixel Movement
jSpeed = 9;     // Jump Speed
mSpeed = 8;     // Movement Speed
Then in the Step Event I have this code

Code:
///Movement Controls

// +----------------------+
// | Version 1.0          |
// | Last Update          |
// | Built Basic Movement |
// +----------------------+

//Get player input
key_right = keyboard_check(vk_right);
key_left = -(keyboard_check(vk_left));
key_jump = keyboard_check_pressed(vk_space);

//-------------------Start of movement algorithm--------------------------------\\

//Calculate left/right movement
move = key_left + key_right; //Ex. (-1) + (0) = -1; (-1) + (1) = 0; (0) + (1) = 1
hsp = move * mSpeed;

//Apply Gravity
if(vsp < 10)
{
    vsp += gForce;
}

//Check Jump input
if(place_meeting(x, y + 1, par_wall)) //If place below player is floor
{
    //Perform jump
    vsp = key_jump * -(jSpeed); //Ex. 1 * -(jump speed)
}

//Horizontal Collision Check
if(place_meeting(x + hsp, y, par_wall)) //Is there something in front of us?
{
    //There is, so move as CLOSE to it as possible
    while(!place_meeting(x + sign(hsp), y, par_wall))
    {
        show_debug_message("Collision Detected on X");
        x += sign(hsp); //Move one more pixel in current direction
    }
    //Do not move any further to left or right
    hsp = 0;
}
x += hsp;

//Vertical Collision Check
if(place_meeting(x, y  + vsp, par_wall)) //Is there something in above or below of us?
{
    //There is, so move as CLOSE to it as possible
    while(!place_meeting(x, y + sign(vsp), par_wall))
    {
        show_debug_message("Collision Detected on Y");
        y += sign(vsp); //Move one more pixel in current direction
    }
    //Do not move any further to up or down
    vsp = 0;
}
y += vsp;

//-------------------End of movement algorithm-------------------------------------\\
*EDIT
So I tried doing the floor option on my X and Y values. However I am still get the same thing. So here is an example of what

Code:
x = floor(x + hsp)
y = floor(y + vsp)
**EDIT 2
I tried to do the whole numbers for gravity instead of .5 However this didn't work either.

I then combined the two floor and whole number combination for kicks and that still didn't work. I am getting the problem.
 
Last edited by a moderator:
P

Paolo Mazzon

Guest
Why don't you just round the x and y values when you draw the sprites?
 
B

BLB

Guest
Why don't you just round the x and y values when you draw the sprites?
So, if I understand correctly I would create a draw event and add code that does something like this.
Code:
x = floor(x);
or do an actual round
Code:
x  = round(x);
 
P

Paolo Mazzon

Guest
Nope, don't change the value of x, just draw a different value all together
Code:
draw_sprite_ext(sprite_index, image_index, round(x), round(y), image_xscale, image_yscale, image_angle, c_white, image_alpha);
And by the way, if you do that, do that, you don't need draw_self.
 
B

BLB

Guest
Nope, don't change the value of x, just draw a different value all together
Code:
draw_sprite_ext(sprite_index, image_index, round(x), round(y), image_xscale, image_yscale, image_angle, c_white, image_alpha);
And by the way, if you do that, do that, you don't need draw_self.
I went ahead and programmed it in this fashion but I still get the same thing with the line going into the floor. I check my collision box and it matches perfectly. I am pretty confounded by this little bug
 

RangerX

Member
Normally, rounding your position is supposed to solve such issues. Have you made sure that you round your position after all movement is done and done?
Put "y=round(y);" at the end of your "end step" event or put such event if you haven't. This way you sure its the last thing that happens.

If that doesn't fix the problem, it MIGHT be a scaling issue. What is your view size/port size vs the resolution of the monitor you display your game in? Also, what are your global settings regarding scaling? "keep aspect ratio" or "fullscale" ?
 
B

BLB

Guest
Normally, rounding your position is supposed to solve such issues. Have you made sure that you round your position after all movement is done and done?
Put "y=round(y);" at the end of your "end step" event or put such event if you haven't. This way you sure its the last thing that happens.

If that doesn't fix the problem, it MIGHT be a scaling issue. What is your view size/port size vs the resolution of the monitor you display your game in? Also, what are your global settings regarding scaling? "keep aspect ratio" or "fullscale" ?
So...I did the rounding thing which didn't fix the problem....then I did your second idea with Scaling. I had a view for the test room I made. That fix it. :( What a sweet but horrible fix. I guess I need to study more on views and scaling in game maker.

Thank you very much for all of your ideas!!! Special thanks to RangerX for fixing it.
 
T

The Green Dev

Guest
for example, round x before you do the while !place_meeting(x+sign(x),y,par_wall)
 
Top