Connecting tilemaps

[Duhjoker]

The Zelda port is coming along nicely. Still working on camera controls but I wanted to go ahead go off that topic so we could talk about how to connect the many room tilemap together and also give each "room" with multiple exits and entries the correct tiles for doing so, so the character shows up at the right spot when entering a room.

Summoner123 gave us a great example last week that included different tile maps and what looks like a simple enough task but as we know nothing is that easy. So here is the example and ive commented// what I believe to be the commands to change tilemaps.......

Code: Select all

#include <Gamebuino.h>
#include <SPI.h>


#define goup    0
#define godown  1
#define goleft  2
#define goright 3

#define solido 1
#define passway 2
#define underpass 3
#define cavepass 4

#define world 0
#define House 1
//#define forest 2
#define theend 3
#define cavepass1 4
#define cavepass2 5


Gamebuino gb;


const byte plb1[] PROGMEM = {8,8,0x70,0x88,0xD8,0x88,0x70,0xA8,0x70,0xD8,};
const byte plb2[] PROGMEM = {8,8,0x70,0x88,0xD8,0x88,0x70,0xA8,0x70,0xD0,};
const byte plb3[] PROGMEM = {8,8,0x70,0x88,0xD8,0x88,0x70,0xA8,0x70,0x58,};
const byte plc1[] PROGMEM = {8,8,0x70,0x88,0x88,0x88,0x70,0xA8,0x70,0xD8,};
const byte plc2[] PROGMEM = {8,8,0x70,0x88,0x88,0x88,0x70,0xA8,0x70,0xD0,};
const byte plc3[] PROGMEM = {8,8,0x70,0x88,0x88,0x88,0x70,0xA8,0x70,0x58,};
const byte pll1[] PROGMEM = {8,8,0x70,0x88,0x98,0x88,0x70,0xA8,0x70,0xD8,};
const byte pll2[] PROGMEM = {8,8,0x70,0x88,0x98,0x88,0x70,0xA8,0x70,0x58,};
const byte pll3[] PROGMEM = {8,8,0x70,0x88,0x98,0x88,0x70,0xA8,0x70,0xD0,};


const byte harbor[] PROGMEM = {11,6,
8,8,
 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4,
 4, 4, 3, 3,14, 3,14, 3, 3, 3,14,
 4, 3, 3, 3, 3, 3, 3,14,14,14, 0,
 3, 3, 3, 3, 3, 3,14, 0, 1, 1, 3,
 3, 3, 3, 3, 3,14, 0, 3, 3, 3, 3,
14,14,14,14,14, 0, 3, 3, 3, 3, 3 } ;

const byte forest[] PROGMEM = {11,6,
8,8,
 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
 4, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4,
 4, 4, 3, 3, 4, 3, 4, 3, 3, 4, 4,
 4, 4, 3, 3, 3, 4, 3, 3, 3, 4, 4,
 4, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4,
 4, 4, 4, 4, 3, 3, 3, 4, 4, 4, 4 } ;

const byte tilemap[] PROGMEM = {30,30,
8,8,
12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,
12,12,12,12,12,12,12,12,12,11,11,11,11,12,12,11,11,12,11,11,12,12,11,12,11,12,12,11,13,11,
12,12,12,12,12,12,12,12,11, 3, 3, 3, 3,11,11, 3, 3,11, 3, 3,11,11, 4,11, 4,11,11,14, 3,14,
11,11,11,13,11,11,11,11, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3,
 3, 3,14, 3,14, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 3, 3, 3, 3, 3, 3,
 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4,14, 4, 4, 4, 4,14, 3, 3, 3,10, 3, 3, 3, 3, 3, 3,
 3, 3, 3, 3, 3, 3, 3, 3, 3,14, 4, 4, 4,14, 3,14, 4, 4, 4, 4,14, 3,14, 4, 3, 3, 3, 3, 3, 3,
14, 3, 3, 3, 3, 3, 3, 3,14, 4, 4,14,14, 3, 3, 3,14,14, 3, 4, 4,14, 4, 4, 4, 4, 3, 3, 3, 3,
 4,14, 3,14,14,14,14,14, 4, 4, 3, 3, 3, 3, 4, 3, 3, 3, 3,14, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3,
 4, 4,14, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3,14, 4, 4, 4, 4, 4, 4, 4, 4, 3,
 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 4, 3, 3,14, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
 4, 4, 4,14, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
 4, 4,14, 3,14, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
 4, 3, 3, 3, 3, 3, 3, 3, 3, 4, 3, 3, 3, 4, 4, 4, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
 4, 4,14, 3,14,14, 3,14, 4, 4, 4, 3, 3, 3, 4, 3, 3, 3, 3, 4, 4, 4, 4, 4, 9, 4, 4, 4, 4, 4,
 4, 4, 4,14, 4, 4,14, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4,14, 3,14,14, 4, 4, 4,
 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 4,14, 3, 3, 3,14, 4, 4, 4,
 4, 4, 3, 4, 4, 4, 4, 4, 3, 3, 3, 4, 3, 3, 3, 3, 4, 4, 4,14,14,14, 3, 3, 3, 3, 4, 4, 4, 4,
 9, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4,
 9, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4,
 4, 4, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3,14, 4,
 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 3, 3, 6, 5, 7, 3, 3, 3,14, 4,
 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 6, 5, 5, 5, 7, 3, 3,14, 4,
 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 3, 3, 3,14, 5, 8, 5,14, 3, 3, 4, 4,
 4, 3, 3,14, 3, 3, 3, 3, 3, 3, 3,10, 3, 3, 3, 3, 3, 3, 3, 3, 3,14,14, 3,14,14, 3, 4, 4, 4,
 4, 3,14, 4,14, 3, 3, 3, 3, 3, 3, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4,
 4, 3, 4,10, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4,
 4, 3,14, 4,14, 3, 3, 3, 3, 4, 4, 4, 4, 4, 3, 3, 3, 3,14,14,14,14,14,14,14,14,14,14,14, 3,
 4, 4, 3,14, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3,14,14, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 9, 0, 3, 3, 2, 2, 3, 3, 3, 3, 3, 2, 2, 3 } ;

const byte agua3[] PROGMEM = {   
B00000011,
B00000100,
B00011000,
B00100000,
B01000000,
B01000000,
B10000000,
B10000000 } ;

const byte agua2[] PROGMEM = {   
B10011001,
B01101111,
B00000000,
B00000000,
B00000000,
B00000000,
B00000000,
B00000000 } ;

const byte agua1[] PROGMEM = {   
B00000000,
B00000000,
B00100010,
B01010101,
B10001000,
B00000000,
B00000000,
B00000000 } ;

const byte voidtile[] PROGMEM = {   
B00000000,
B00000000,
B00000000,
B00000000,
B00000000,
B00000000,
B00000000,
B00000000 } ;

const byte arvore[] PROGMEM = {   
B00010000,
B00101000,
B01000100,
B10000010,
B10000010,
B01101100,
B00101000,
B01010100 } ;

const byte tijolo[] PROGMEM = {   
B11111111,
B10101001,
B10101111,
B11111111,
B10010001,
B11111111,
B10000101,
B11111111 } ;

const byte telha[] PROGMEM = {   
B00000001,
B00000011,
B00000111,
B00001111,
B00011111,
B00111111,
B01111111,
B11111111 } ;

const byte telha2[] PROGMEM = {   
B00000000,
B10000000,
B11000000,
B11100000,
B11110000,
B11111000,
B11111100,
B11111110 } ;

const byte porta[] PROGMEM = {   
B11111111,
B11100111,
B11000011,
B10000001,
B10000001,
B10000001,
B10000001,
B10000001 } ;

const byte grass1[] PROGMEM = {   
B00000000,
B01000100,
B00100010,
B00011001,
B01000000,
B00000100,
B00100010,
B00000000 } ;

const byte Grave1[] PROGMEM = {   
B11111111,
B01000010,
B01011010,
B01011010,
B01011010,
B01011010,
B01000010,
B11111111 } ;

const byte BaseM1[] PROGMEM = {   
B10000001,
B10001001,
B10000011,
B10100001,
B10001001,
B10000001,
B01000010,
B00111100 } ;

const byte M2[] PROGMEM = {   
B10010001,
B10000001,
B11000101,
B10000001,
B10101001,
B10000001,
B10000101,
B10100001 } ;

const byte cave1[] PROGMEM = {   
B10000001,
B10000001,
B10011001,
B10111101,
B10111101,
B10111101,
B01111110,
B00000000 } ;

const byte flor[] PROGMEM = {   
B00000000,
B00000000,
B00001000,
B00000000,
B00000000,
B01000000,
B00000010,
B00000000 } ;



const byte *spritesheet[] = {   agua3,agua2,agua1,voidtile,arvore,tijolo,telha,telha2,porta,grass1,Grave1,BaseM1,M2,cave1,flor } ;

const byte logo[] PROGMEM = {32,30,
0x60,0x0,0x0,0x0,
0x3C,0xF,0x70,0x0,
0x1F,0xBC,0xC,0x0,
0xF,0xFF,0xFA,0x0,
0x3,0xFF,0x35,0x0,
0x1,0xFF,0xBF,0x80,
0x0,0xFF,0xFF,0x80,
0x0,0xFF,0xFF,0x80,
0x0,0xFF,0xFF,0x0,
0x0,0xFF,0xFE,0x0,
0x0,0xFF,0xFE,0x0,
0x0,0x7F,0xFE,0x0,
0x0,0x7F,0xFE,0x0,
0x0,0x33,0xBA,0x0,
0x0,0x33,0x18,0x0,
0x0,0x31,0x0,0x0,
0x0,0x0,0x4,0x0,
0x0,0x20,0x18,0x0,
0x0,0x20,0x30,0x0,
0x0,0x16,0x70,0x0,
0x0,0xC,0xF0,0x0,
0x0,0x37,0xF0,0x0,
0x0,0x3F,0xFF,0x0,
0x0,0x7F,0xFF,0x0,
0x1,0xFF,0xFF,0xC0,
0x3,0xFF,0xFF,0xE0,
0xF,0xFF,0xFF,0xF0,
0x1F,0xFF,0xFF,0xF8,
0x3F,0xFF,0xFF,0xFC,
0x7F,0xFF,0xFF,0xFC,
};



typedef struct{
 
  int posx=42;
  int posy=24;
  int tilex=0;
  int tiley=0;
  byte flip = NOFLIP;
 
  const byte *bitmap = plb1;
} character;

character player;

int camerax = -144 ;
int cameray = -172 ;

byte cenary=0;


void setup() {
 
  Serial.begin(9600);
  gb.begin();
  gb.titleScreen(F("LIS"),logo);
  gb.setFrameRate(16); 

}

////////////////////changes tile maps
void loop()
{
 
  if(cenary == world)
  {
 if(gb.update()){
  walk();
  render();
  }
 }
 
 if(cenary == House){
 if(gb.update()){
  }
 }
 
 if(cenary == cavepass1){
 if(gb.update()){
  }
 }
 
 
 
 
 
}


void walk()
{
 
  byte direc = godown;
  bool flagwalk = false;
 
  if(gb.buttons.pressed(BTN_B)){Serial.println(camerax);Serial.println(cameray);}
 
      if(gb.buttons.repeat(BTN_UP,1)){direc = goup;player.posy--;flagwalk = true;player.flip = NOFLIP;if(colisiontest() == solido)player.posy++;}
 else if(gb.buttons.released(BTN_UP))direc = goup;
 
      if(gb.buttons.repeat(BTN_DOWN,1)){direc = godown; player.posy++;flagwalk = true;player.flip = NOFLIP;if(colisiontest() == solido)player.posy--;}
 else if(gb.buttons.released(BTN_DOWN))direc = godown;

      if(gb.buttons.repeat(BTN_LEFT,1)){direc = goleft; player.posx--;flagwalk = true; player.flip = FLIPH;if(colisiontest() == solido)player.posx++;}
 else if(gb.buttons.released(BTN_LEFT))direc = goleft;

      if(gb.buttons.repeat(BTN_RIGHT,1)){direc = goright; player.posx++ ;flagwalk = true;player.flip = NOFLIP;if(colisiontest() == solido)player.posx--;}
 else if(gb.buttons.released(BTN_RIGHT))direc = goright;


 if(flagwalk)
 {
   if(direc==goup){
      if(gb.frameCount % 6 >= 0 && gb.frameCount % 6 < 2){player.bitmap = plc1 ;}
else  if(gb.frameCount % 6 >= 2 && gb.frameCount % 6 < 4){player.bitmap = plc2;}
else  if(gb.frameCount % 6 >= 4 && gb.frameCount % 6 <= 6){player.bitmap = plc3;}
   }
   
else   if(direc==godown){
      if(gb.frameCount % 6 >= 0 && gb.frameCount % 6 < 2){player.bitmap = plb1;}
else  if(gb.frameCount % 6 >= 2 && gb.frameCount % 6 < 4){player.bitmap = plb2;}
else  if(gb.frameCount % 6 >= 4 && gb.frameCount % 6 <= 6){player.bitmap = plb3;}
   }
   
else   if(direc==goleft){
      if(gb.frameCount % 6 >= 0 && gb.frameCount % 6 < 2){player.bitmap = pll1;}
else  if(gb.frameCount % 6 >= 2 && gb.frameCount % 6 < 4){player.bitmap = pll2;}
else  if(gb.frameCount % 6 >= 4 && gb.frameCount % 6 < 6){player.bitmap =pll3 ;}
   }
   
else   if(direc==goright){
      if(gb.frameCount % 6 >= 0 && gb.frameCount % 6 < 2){player.bitmap = pll1;}
else  if(gb.frameCount % 6 >= 2 && gb.frameCount % 6 < 4){player.bitmap = pll2;}
else  if(gb.frameCount % 6 >= 4 && gb.frameCount % 6 <= 6){player.bitmap = pll3;}
   }
 
 }
 
     if(player.posx > 79)player.posx = 79;
else if(player.posx <  0)player.posx =  0;
 
     if(player.posy > 40)player.posy = 40;
else if(player.posy <  0)player.posy =  0;
 
} 


void render()
{

 
      if(player.posx > 54 && camerax <  0 && camerax  > -156){player.posx = 54;camerax--;}
else  if(player.posx < 30 && camerax <  0 && camerax  > -156){player.posx = 30;camerax++;}
else  if(player.posx > 54 && camerax <= 0 && camerax >= -156)camerax--;
else  if(player.posx < 30 && camerax <= 0 && camerax >= -156)camerax++;   
 
 
      if(player.posy > 28 && cameray < 0 && cameray >  -192){player.posy = 28;cameray--;}
else  if(player.posy < 20 && cameray < 0 && cameray >  -192){player.posy = 20;cameray++;}
else  if(player.posy > 28 && cameray <= 0 && cameray >= -192)cameray--;
else  if(player.posy < 20 && cameray <= 0 && cameray >= -192)cameray++; 

      if(camerax > 0)camerax=0;
else  if(camerax < -156) camerax = -156;
 
      if(cameray > 0)cameray=0;   
else  if(cameray < -192) cameray = -192;

   

  gb.display.drawTilemap(camerax,cameray,tilemap,spritesheet);
  gb.display.drawBitmap(player.posx,player.posy,player.bitmap,NOROT,player.flip);

  if(gb.buttons.repeat(BTN_B,1))
    {
      gb.display.print("CPU Load: ");
      gb.display.print(gb.getCpuLoad());
      gb.display.cursorX = 0;
    }
}


byte colisiontest()
{
 
  byte i=0;
 
 
 
 for(i=0; i < gb.display.numcolision + 1; i++)
   {
    if(gb.collideRectRect(player.posx,player.posy,5,8,gb.display.solid[i].x,gb.display.solid[i].y,8,8))
    {
          //if(gb.display.solid[i].spritecol == voidtile); //Do nothing because it's floor
         
      if(gb.display.solid[i].spritecol == porta)  return passway; /////// change room tiles?
else  if(gb.display.solid[i].spritecol == Grave1) return underpass;/////same as above
else  if(gb.display.solid[i].spritecol == cave1)  return cavepass;//////same as above
         
          if(gb.display.solid[i].spritecol == arvore) return solido;
else      if(gb.display.solid[i].spritecol == agua2)  return solido;
else      if(gb.display.solid[i].spritecol == agua3)  return solido;
else      if(gb.display.solid[i].spritecol == tijolo) return solido;
else      if(gb.display.solid[i].spritecol == telha)  return solido;
else      if(gb.display.solid[i].spritecol == telha2) return solido;
else      if(gb.display.solid[i].spritecol == BaseM1) return solido;
else      if(gb.display.solid[i].spritecol == M2)     return solido;



      }   
  }   
  return 0;
}


OK I marked the room change bits in two places. so what it looks like to me is that I make some tiles I want used as "ports", add them to the collision mix but return passageway. then at the top do if scenery with a gb.update.

[Duhjoker]

All right folks how can we connect these rooms?

Do I need to make different tiles for passage ways or can I use my regular void tile or port tile code the coordinates?

[naed]

Would it work better to just do one huge tilemap?

Or were you looking at some kind of transition between maps?

There's is a great example somewhere on the boards called myrpg that's has excellent transitions between screens, I'll dig out the post and get a link here soon (although it's not very well documented)

Here is the link viewtopic.php?f=13&t=3327&p=10624&hilit=Myrpg#p10624

Code can be found at this GitHub https://github.com/Frakasss/MyRPG

[Duhjoker]

Awesome I'll check that out soon.

I think it would be better to transition from room to room instead of one huge map. The dessert maps on the far left side will need some special programming plus it should make it easier to program the monsters for each room

[Duhjoker]

Am I looking at the map.ino?

[naed]

Map.ino has the main transition info, but unfortunately I lack the knowledge to understand it

[Duhjoker]

Yep same boat!!!

[Sorunome]

Let's see.....(Disclaimer: I never saw that code before)

First of all, drawMap seems to be drawing a tilemap, while horiz and vert define offsets, so like if vert is 10 then the tilemap is drawn 10 pixels down. And if horiz is 10 it is drawn 10 pixels to the right etc.


So, the basic idea of such transitions is that you draw two tilemaps, one that slides off the screen and another one that slides in. Or, with that drawMap defined there, you have something like

Code: Select all

for(x=0;x<SCREEN_WIDTH;x++){
  drawMap(oldMap,oldSpritesheet,x,0);
  drawMap(newMap,newSpritesheet,SCREEN_WIDTH-x,0);
}


Of cource exactly that wouldn't work, as the for-loop should be one iteration per frame and there is no gb.update() calling, it is only to illustrate the basic concept.

In MyRPG.ino line 74 and 75 you can see the calling happenin, first to output_map and then to output_transition.
Let's take a look at output_map, first (that is the function which is doing the actual calculations for the map sliding)

There is only tilemap switching done when gamestatus is 1, so only that case is important. First you just simply draw both tilemap fragments how they were calculated in the last frame. After that you calculate the positions for the next frame, for that you have a simple switch for the direction. And from there on it's just simple adding / subtracting of the vertical / horizontal offset of both tilemaps to make them seem to slide in/out

output_transition seems to be for some things such as fading to white / from white etc. (thus irrelevant to the question asked)

[naed]

whoah!!! progress

check this out

Code: Select all

if(gb.buttons.repeat(BTN_A,1)){
    gb.display.setColor(BLACK);
    gb.display.fillRect(0,0,84,48);
    gb.display.setColor(WHITE);
    gb.display.fillRect(animTransition,animTransition,84-(2*animTransition),48-(2*animTransition));
    gb.display.setColor(BLACK);
    {animTransition = animTransition + 6;}
  }
  if(gb.buttons.repeat(BTN_B,1)){
    gb.display.setColor(BLACK);
    gb.display.fillRect(0,0,84,48);
    gb.display.setColor(WHITE);
    gb.display.fillRect(animTransition,animTransition,84-(2*animTransition),48-(2*animTransition));
    gb.display.setColor(BLACK);
    {animTransition = animTransition - 6;}

dont forget to declare your variables

Code: Select all

int animTransition = 0

with this code I set a trigger of holding A will get you a closing black rectangle then holding B will clear the black rectangle back to the map (don't hold for too long though)

i'm sure we could add an if statement to this that would trigger it as a transition

for example -
if(player is is this position)
trigger collapsing rectangle
then load new map
if(new map is loaded)
trigger opening rectangle

then new map is loaded


EDIT

was writing this as Sorunome posted his reply so didn't see that before I posted (i'd been playing around with the code to work it out) i obviously can't explain it as good as Sorunome though lol

thank you Sorunome for the more detailed explanation, help from the experts is always appreciated

[Duhjoker]

I finished using summoner123's tilemapper today now I just have to copy the code generated which takes for-ev-er!!! I really hope he add a copy button soon. This the file with the tile maps in it. If you want look at them you will the tilemapper. I haven't really changed the sprites yet, water looks like crap and my sand tile is weird. I like the blocky stuff. I also need to brighten the rock tiles too. Oh and the statue needs a shield just haven't done that yet.

https://www.dropbox.com/s/h3pdjvale10bw ... e.png?dl=0