Layering quads on top of each other in OpenGL - c++

Question

I'm creating a 2D tile based tactical rpg using OpenGL using C++ and I'm having difficulties with layering my tiles/quads. I want to to able to put say a tree textured quad, the image is of the tree with a surrounding transparent alpha layer, on top of an opaque grass textured quad. I need to have the tree appear on top of the grass with the grass showing through the alpha layer of the tree image.
So far I've been messing with glDisable(GL_DEPTH_TEST), glEnable(GL_BLEND), andglBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) but with no luck so far. I end up with a tree on a black background, instead of the grass tile. Could someone point me in the right direction?
Below is my render function and initialize function which are probably most relevant.
void View::initialize() {
updateProjection(window);
glDisable(GL_DEPTH_TEST);
glClearColor(0.0, 0.0, 0.0, 1.0);
camera = new Camera(Vector3(-1, -3, 25), Vector3(-1, -3, 0), Vector3(0, 1, 0));
loadImages();
initShaders();
//needed for transparency?
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}
void View::render(World* worldTemp)
{
Matrix4 mvpMatrix, viewMatrix, modelMatrix;
Matrix4 XAxisRotationMatrix, YAxisRotationMatrix, ZAxisRotationMatrix;
input->handleInput(camera, worldTemp->getPlayer());
worldTemp->timerTick();
worldTemp->clearFog();
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear Screen and Depth Buffer
XAxisRotationMatrix = Matrix4::IDENTITY;
YAxisRotationMatrix = Matrix4::IDENTITY;
ZAxisRotationMatrix = Matrix4::IDENTITY;
XAxisRotationMatrix.rotate(Vector3(1.0, 0.0, 0.0), XAxisRotationAngle);
YAxisRotationMatrix.rotate(Vector3(0.0, 1.0, 0.0), YAxisRotationAngle);
ZAxisRotationMatrix.rotate(Vector3(0.0, 0.0, 1.0), ZAxisRotationAngle);
viewMatrix = camera->getViewMatrix();
modelMatrix = translationMatrix(Vector3(-4, 2, 0));
mvpMatrix = projectionMatrix * viewMatrix * modelMatrix;
//Spit out the map
for (int i = 0; i < 100; i++){
for (int j = 0; j < 100; j++){
for (int t = 0; t < 5; t++){
if (worldTemp->getTile(i, j)->isOccupied() == true) {
if (worldTemp->getTile(i, j)->getOccupyingEntityIndexed(t)->getFog()){
worldTemp->getTile(i, j)->getOccupyingEntityIndexed(t)->getEntityQuad()->render_self(mvpMatrix, true);
}
else{
worldTemp->getTile(i, j)->getOccupyingEntityIndexed(t)->getEntityQuad()->render_self(mvpMatrix);
}
}
}
}
}
//Place the player
worldTemp->getPlayer()->getEntityQuad()->render_self(mvpMatrix);
renderEnemies();
glutSwapBuffers(); //works with GL_DOUBLE. use glFlush(); instead, if using GL_SINGLE
}

Answer 1

Basically, in 2d games layering done via ordering of render calls. If you want layer A on top of layer B, you should render layer B first and then layer A.
blend function that you're using should depend on texture format of images. There are two common formats for alpha:
Pre-multiplied alpha
Straight alpha
More info about this: https://developer.nvidia.com/content/alpha-blending-pre-or-not-pre
opengl es2 premultiplied vs straight alpha + blending
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA); is for premultiplied alpha, and it should work well if you use colors as is. glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); is for straight alpha.