Scale Graphics no Smooth

Hi everyone. My name is Telmo and I live in Barcelona. This is my first serious try to use OF and my first post on the forums.

I’m trying to make a small quick game in here, and also testing OF as a good tool to do this kind of project that need a quick start and all available NOW.

For this particular project I’m aiming to try a specific aesthetic. Like most of the indie stuff around now, i (again) want to try to get some retro-loockish into this app. So i need big chunky pixels (there’s probably hipsters t-shirts with big chunky pixels, this app needs too). Pretty big squares of color on any plasma screen.

So what’s the problem?

Smooths, anti-aliasings, GL_LINEARs and all those stuff. How can i shut them all OFF?
I want to be able to load a pixel imagine, and not have any intermediate alpha pixels added when i do rotations, translations or scales.

My theory was that i only need to tell opengl to scale the X and Y axis a percentage that is the difference between the 320x200 pixel game area i intent to have, into the “whatever size the window has”, BEFORE any other translation, rotation, and scale is done.

An attempt (under a new empty project):

  
#include "testApp.h"  
ofImage         myImage;  
float f = 0;  
ofImage         posRender;  
  
//--------------------------------------------------------------  
void testApp::setup(){  
    ofDisableSmoothing();  
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);  
	glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);  
    myImage.loadImage( "graphics/player.png");  
}  
  
//--------------------------------------------------------------  
void testApp::update(){  
  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
    f += HALF_PI/4.0;  
    ofPushMatrix();  
    ofRotate(f);  
    myImage.draw( 40, 40 );  
    ofPopMatrix();  
  
    posRender.grabScreen(0,0,320,200);  
    posRender.resize(WIDTH, HEIGHT);  
    posRender.draw(0,0);  
}  

This is pure frustration. I get very slow results and not even worth using.
Another atempt:

  
#include "testApp.h"  
ofImage         myImage;  
float f = 0;  
  
//--------------------------------------------------------------  
void testApp::setup(){  
    ofDisableSmoothing();  
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);  
	glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);  
    myImage.loadImage( "graphics/player.png");  
}  
  
//--------------------------------------------------------------  
void testApp::update(){  
  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
    f += HALF_PI/4.0;  
    ofPushMatrix();  
    ofScale(3.0f, 3.0f,0.0f);  
    ofRotate(f);  
    myImage.draw( 40, 40 );  
    ofPopMatrix();  
}  

and i got this results:

The image gets those pixels trying to go from the turquoise to the magenta. I want to eliminate those.
Like this:

This kind of chunky ugly pixels.

However when the image rotates, the border and the middle pixels get rotated with the exactitude of a… square. which leads me to think it could actually have something do to with the texture mapping that OF uses.

Resizing each one of the image every time the window change it’s size it is also not an option.

I imagine this could be useful to get some hallucinating Mode7 kind of graphical display very easily from OF and OpenGL, keeping it a 2D implementation and gameplay, as the looks (i can only imagine the speed, this is not an OutRun Arcade Machine).

Did anyone had any experience with this?
Is it possible to create this effect under OF?

Thanks for any help in advance, and gratz for the great project.

Check out ofTexture, you will notice that the scaling mode gets set when the texture is allocated: https://github.com/openframeworks/openFrameworks/blob/e47005fb0402f94550624cce66ec33ee82c6450c/libs/openFrameworks/graphics/ofTexture.cpp#L142

You can subclass and override that function to do the GL_NEAREST, or you can just edit it right in the OF lib. Either way, it should work a bit better for you.

I am not 100% certain that it will work right for rotations however, I kept all my sprites aligned when I did this.

also, if you are doing tons of sprite stuff, you might want to check out this sprite lib that zach gage just recently released: https://github.com/stfj/ofxSpriteSheetRenderer

handles batch rendering so everything goes superfast on iPhone.

I got into some great results, and improvements.
This is looking exactly as i wanted.

However I’m having some small difficulties with some artefacts.
These:

I like the fact that drawing images comes within the order of drawing.
Its a very good principle, and an easy concept that allows to make various applications and
probably most importantly, great 2D games.
But i’m trying to avoid having to make on my system a way to organise the layer drawing,
when an OpenGLs z buffer does that for me. Specially since I’m using
(and thinking all the game logic) into 3D maths anyway…
Even implementing 3D collisions right now.

Does anyone know’s how to get this effect out of openframeworks?
Is this achievable in such an easy matter as the previous problem as well?

The project is going well, and just a few more steps to have a solid engine running.

I’m thankful in advance for all the help displayed.
I just BUMPED this thread because its related so same project.

first of all… whoa, this looks crazy, I like it.

second, try glEnable(GL_DEPTH_TEST);

it might help.