Creating background tilesets.
I''m working on the visual aspect of a 2-d sprite-based shooter and while drawing and animating the playercraft and enemies is seemingly simple enough, I have no idea where to start in terms of designing scrolling backgrounds for the programmer to use in the game.
I''ve been browsing Google for game design tutorials and it seems that the word ''tilesets'' pops up quite frequently. I can''t seem to find a tutorial on how to create or how to implement such tilesets into a game in any form or fashion. If possible I''d like to continue using Photoshop...um. So I suppose my question is, can anyone provide any information on how to design 2-d graphics proper, specifically backgrounds, in the form of links to tutorials or books or simply advice?
Sorry if this post screams noobie, but at the moment it''s what I am
-klj
a tileset is a set of tiles. and a tile is a graphics of some kind. Just ask your programmer how he wants the graphics.
edit: check this place out for tilesets: www.reinerstileset.de
[edited by - Nasso on January 18, 2004 5:23:10 PM]
[edited by - Nasso on January 18, 2004 5:23:40 PM]
edit: check this place out for tilesets: www.reinerstileset.de
[edited by - Nasso on January 18, 2004 5:23:10 PM]
[edited by - Nasso on January 18, 2004 5:23:40 PM]
The programmers are just as new to game design as I am. We''re diving blind into this because we''re tired of waiting for people to make games we want to play.
Since I posted I''ve kinda inferred that one way to do graphics in general is to take all of your sprites and paste them into one large image file (a bitmap?). The programmer can then use that to render the graphics on screen, extracting the appropriate visual information from the ''tiles'' of that one file. At least this is what I think is done.
But my problem right now is backgrounds. Say you''re doing a top-down shooter and the background scrolls from top to bottom. How do you render that--as one large image file and simply let the programmer load that into memory when the level is loaded? Or it is broken down as well?
Since I posted I''ve kinda inferred that one way to do graphics in general is to take all of your sprites and paste them into one large image file (a bitmap?). The programmer can then use that to render the graphics on screen, extracting the appropriate visual information from the ''tiles'' of that one file. At least this is what I think is done.
But my problem right now is backgrounds. Say you''re doing a top-down shooter and the background scrolls from top to bottom. How do you render that--as one large image file and simply let the programmer load that into memory when the level is loaded? Or it is broken down as well?
you dont have to create a big image. Use small images and the create a array to decide where the images should be.
(check out my game www.cowboygame.net it uses this metod)
example:
int maparray[10][10] = { {0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,1,1,0,0,0,0},
{0,0,0,0,1,1,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0}};
lets say this is our map. 0 stand for grass and 1 stands for tree. The game will loop this through and draw a grass tile were its a 0 and a tree tile where its a 1.
you can scrol around on this map by choosing wich squaresto draw out. say if you got 3*3 squares sized gamescreen and the upperleft square is [5][3]. Then start drawing from [5][3] and go 3 squares in x-direction and 3 squares in y-direction. To move the character to the left just start drawing from [4][3].
this is a tileengine..
btw: check out the articles section here on gamedev.net or search google.com for tile-based game tutorial or something like that.. you will get tons of hits.
(check out my game www.cowboygame.net it uses this metod)
example:
int maparray[10][10] = { {0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,1,1,0,0,0,0},
{0,0,0,0,1,1,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0}};
lets say this is our map. 0 stand for grass and 1 stands for tree. The game will loop this through and draw a grass tile were its a 0 and a tree tile where its a 1.
you can scrol around on this map by choosing wich squaresto draw out. say if you got 3*3 squares sized gamescreen and the upperleft square is [5][3]. Then start drawing from [5][3] and go 3 squares in x-direction and 3 squares in y-direction. To move the character to the left just start drawing from [4][3].
this is a tileengine..
btw: check out the articles section here on gamedev.net or search google.com for tile-based game tutorial or something like that.. you will get tons of hits.
quote:Original post by killjoi
Say you''re doing a top-down shooter and the background scrolls from top to bottom. How do you render that--as one large image file and simply let the programmer load that into memory when the level is loaded? Or it is broken down as well?
Technically, you can do it this way, but it would either be a lot of work on a huge file, or a relatively short level. What most games tend to do are create squares of background images that will "tile," or match up along their four sides when combined on-screen.
Say you have a tile with star-filled space, generally you''d want a couple of variations of this tile so the background doesn''t get too repetitive. Generally, it''s good to have at least three versions of each type of tile, but just make sure that they match up smoothly with each other.
Once you''ve created enough tiles to make an interesting level you usually compile all of them onto a single sheet, evenly spaced. Your programmers can then use that sheet to reference the tiles and display them on-screen in the level configuration. Depending on what platform you''re working on, cell/gba/pc/etc.., there may be different restrictions for the tiles, either in terms of colours, size, or bit-depth, but you''ll have to check with your programmers on that one.
Hi,
I''ve only just started with games development so am no authority on tileset creation, but here''s what I''ve been trying.
My tiles are 80x80 pixels (not sure if the graphics police will hang me for not having a 2^X size!), and I''ve been using the GIMP to make tileable base textures. I''ve got grass, dirt, tarmac, water styles all as 80x80 pixel bmps.
I then import them into Adobe Illustrator (I bought it to do thesis figures and it was the BEST proggy I''ve ever bought*) and combine them using layers and masks to make junction tiles,such as water to grass edges, tarmac/dirt roads on grass etc.
I reckon they look pretty good, but then I''m no expert.
Cheers Stephen
*bought is written twice to avoid the wankers who see a commerical app mentioned and immediately post that it MUST have been pirated!
Turn Left 100m..........
YES! That left back there!
I''ve only just started with games development so am no authority on tileset creation, but here''s what I''ve been trying.
My tiles are 80x80 pixels (not sure if the graphics police will hang me for not having a 2^X size!), and I''ve been using the GIMP to make tileable base textures. I''ve got grass, dirt, tarmac, water styles all as 80x80 pixel bmps.
I then import them into Adobe Illustrator (I bought it to do thesis figures and it was the BEST proggy I''ve ever bought*) and combine them using layers and masks to make junction tiles,such as water to grass edges, tarmac/dirt roads on grass etc.
I reckon they look pretty good, but then I''m no expert.
Cheers Stephen
*bought is written twice to avoid the wankers who see a commerical app mentioned and immediately post that it MUST have been pirated!
Turn Left 100m..........
YES! That left back there!
Cool Stuff
Heres a method I wrote to draw a background, I use LWJGL but I'm sure you can use it. This is using OpenGL.
static final int XCO = 500;
static final int YCO = 400;
static int startX = 0, endX = 0;
static int startY = 0, endY = 0;
public static void drawBackground(int w, int h)
{
int west = w*(XCO*2)*-1;
int east = w*(XCO*2);
int south = h*(YCO*2)*-1;
int north = h*(YCO*2);
startX = west-XCO;
endX = east;
startY = south-YCO;
endY = north;
int tileAmountX = (((startX*-1)+endX)/(XCO*2))+1;
int tileAmountY = (((startY*-1)+endY)/(YCO*2))+1;
float tempStartX = (float)startX;
float tempEndX = (float)(startX+(XCO*2));
float tempStartY = (float)startY;
float tempEndY = (float)(startY+(YCO*2));
GL.glPushMatrix();
GL.glBindTexture(GL.GL_TEXTURE_2D, background); //backgroud is a texture
GL.glBegin(GL.GL_QUADS);
for(int y = 0; y < tileAmountY; y++)
{
for(int x = 0; x < tileAmountX; x++)
{
GL.glTexCoord2f(0.0f, 0.0f);
GL.glVertex3f(tempStartX, tempStartY, -10.0f);
GL.glTexCoord2f(1.0f, 0.0f);
GL.glVertex3f(tempEndX, tempStartY, -10.0f);
GL.glTexCoord2f(1.0f, 1.0f);
GL.glVertex3f(tempEndX, tempEndY, -10.0f);
GL.glTexCoord2f(0.0f, 1.0f);
GL.glVertex3f(tempStartX, tempEndY, -10.0f);
tempStartX = tempStartX+(XCO*2);
tempEndX = tempEndX+(XCO*2);
}
tempStartY = tempStartY+(YCO*2);
tempEndY = tempEndY+(YCO*2);
tempStartX = (float)startX;
tempEndX = (float)(startX+(XCO*2));
}
GL.glEnd();
GL.glPopMatrix();
}
Ok what this does. Say for example you pass in 4, 4. It will draw 4 quads on the right, left, top and bottom in rows so you will get a nice background. Then it's up to you to apply the appropriate textures. You can make a texture array and use the necassary textures as required. You will also have to call glTranslatef and glLoadIndentity(). You can put them in the method but I prefer not to.
Hope this helps.
[edited by - Mr_Ridd on January 23, 2004 1:28:24 AM]
Heres a method I wrote to draw a background, I use LWJGL but I'm sure you can use it. This is using OpenGL.
static final int XCO = 500;
static final int YCO = 400;
static int startX = 0, endX = 0;
static int startY = 0, endY = 0;
public static void drawBackground(int w, int h)
{
int west = w*(XCO*2)*-1;
int east = w*(XCO*2);
int south = h*(YCO*2)*-1;
int north = h*(YCO*2);
startX = west-XCO;
endX = east;
startY = south-YCO;
endY = north;
int tileAmountX = (((startX*-1)+endX)/(XCO*2))+1;
int tileAmountY = (((startY*-1)+endY)/(YCO*2))+1;
float tempStartX = (float)startX;
float tempEndX = (float)(startX+(XCO*2));
float tempStartY = (float)startY;
float tempEndY = (float)(startY+(YCO*2));
GL.glPushMatrix();
GL.glBindTexture(GL.GL_TEXTURE_2D, background); //backgroud is a texture
GL.glBegin(GL.GL_QUADS);
for(int y = 0; y < tileAmountY; y++)
{
for(int x = 0; x < tileAmountX; x++)
{
GL.glTexCoord2f(0.0f, 0.0f);
GL.glVertex3f(tempStartX, tempStartY, -10.0f);
GL.glTexCoord2f(1.0f, 0.0f);
GL.glVertex3f(tempEndX, tempStartY, -10.0f);
GL.glTexCoord2f(1.0f, 1.0f);
GL.glVertex3f(tempEndX, tempEndY, -10.0f);
GL.glTexCoord2f(0.0f, 1.0f);
GL.glVertex3f(tempStartX, tempEndY, -10.0f);
tempStartX = tempStartX+(XCO*2);
tempEndX = tempEndX+(XCO*2);
}
tempStartY = tempStartY+(YCO*2);
tempEndY = tempEndY+(YCO*2);
tempStartX = (float)startX;
tempEndX = (float)(startX+(XCO*2));
}
GL.glEnd();
GL.glPopMatrix();
}
Ok what this does. Say for example you pass in 4, 4. It will draw 4 quads on the right, left, top and bottom in rows so you will get a nice background. Then it's up to you to apply the appropriate textures. You can make a texture array and use the necassary textures as required. You will also have to call glTranslatef and glLoadIndentity(). You can put them in the method but I prefer not to.
Hope this helps.
[edited by - Mr_Ridd on January 23, 2004 1:28:24 AM]
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement