BASIC

Author Topic: Map Editor implementation  (Read 2911 times)

Offline xxbastianxx

  • Mc. Print
  • *
  • Posts: 38
    • View Profile
Map Editor implementation
« on: 2013-Mar-04 »
Hey guys,

I'd like to implement a map editor in my jump and run... I cant find that in the help section of GL Basic...

could someone give me an example ? And is it maybe possible that there is a tool for that ?

TY

MrTAToad

  • Guest
Re: Map Editor implementation
« Reply #1 on: 2013-Mar-04 »
Mappy is pretty good, but the file format is awful.  However, there are a few routines around here that will load and display the files.

Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4094
  • On the shoulders of giants.
    • View Profile
    • My Apps
Re: Map Editor implementation
« Reply #2 on: 2013-Mar-04 »
Creating your own map editor is not difficult as long as you understand how to use and manipulate the arrays that will hold your level data.

A simple editor could be something like this

Code: GLBasic [Select]
// --------------------------------- //
// Project: simple_map_editor
// Start: Monday, March 04, 2013
// IDE Version: 10.283


SETCURRENTDIR("Media") // go to media files

SETSCREEN 640,480,0

GLOBAL map%[]
GLOBAL colour%[]

DIM map[20][15]

DIM colour[10]

colour[0]=RGB(0,0,0)
colour[1]=RGB(255,0,0)
colour[2]=RGB(0,255,0)
colour[3]=RGB(0,0,255)
colour[4]=RGB(255,255,255)
colour[5]=RGB(255,0,255)
colour[6]=RGB(255,255,0)
colour[7]=RGB(0,255,255)

SYSTEMPOINTER TRUE


main()


// Main function
FUNCTION main:

LOCAL mx%, my%, b1%, b2%, cx%, cy%, gfx%

WHILE TRUE

 // Tiles
 FOR n=0 TO 7
  DRAWRECT n*32,0,32,32,colour[n]
 NEXT

 PRINT "LOAD",320,16
 PRINT "SAVE",384,16
 PRINT "NEW",448,16

 // Mouse position
 MOUSESTATE mx,my,b1,b2

 // Cursor position
 cx=mx/32
 cy=my/32


 // Select options
 IF b1 AND cy=0
  IF cx<8 THEN gfx=cx           // Pick tile
  IF cx=10 THEN load_data()             // Load data
  IF cx=12 THEN save_data()             // Save data
  IF cx=14 THEN clear_data()    // Clear data
 ENDIF  


 // Draw screen
 FOR y=1 TO 14
 FOR x=0 TO 19
  DRAWLINE x*32,32,x*32,480,RGB(64,64,64)
  DRAWLINE 0,y*32,640,y*32,RGB(64,64,64)
 
  IF map[x][y]>0 THEN DRAWRECT x*32,y*32,32,32,colour[map[x][y]]
 
  PRINT map[x][y],x*32,y*32
 
 NEXT
 NEXT



 // Paint with colour onto map
 IF b1 AND cy>0 THEN map[cx][cy]=gfx



SHOWSCREEN

WEND

ENDFUNCTION


// Clear data
FUNCTION clear_data:

 FOR y=0 TO 14
 FOR x=0 TO 19
  map[x][y]=0
 NEXT
 NEXT

ENDFUNCTION


// Load map data
FUNCTION load_data:

 LOCAL file$, ok%

 file$="level.dat"

 ok=DOESFILEEXIST(file$)

 IF ok

  OPENFILE (1,file$,1)

   FOR y=0 TO 14
   FOR x=0 TO 19
    READWORD 1,map[x][y]
   NEXT
   NEXT

  CLOSEFILE 1
 ENDIF

ENDFUNCTION


// Save map data
FUNCTION save_data:

 LOCAL file$

 file$="level.dat"

 OPENFILE (1,file$,0)

 FOR y=0 TO 14
 FOR x=0 TO 19
  WRITEWORD 1,map[x][y]
 NEXT
 NEXT

 CLOSEFILE 1

ENDFUNCTION
 

This code shows a number of important features in a map editor, including -
 - Storing map data in an array
 - Using array data to display a map
 - Saving the array
 - Loading the array

It's simple, but it works. This code can easily be adapted to use sprites instead of rectangles.
I came. I saw. I played.

Offline spacefractal

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 3322
    • View Profile
    • Space Fractal
Re: Map Editor implementation
« Reply #3 on: 2013-Mar-05 »
I use tiles:
http://www.mapeditor.org/

This one uses XML format (don't save in compressed format), but was quite easy to read it for those features I want to use.

Alternative, try this one (EzMap - GLBasic coded Map Editor):
http://www.glbasic.com/forum/index.php?topic=8721.0
« Last Edit: 2013-Mar-05 by spacefractal »
Greedy Mouse - Karma Miwa - Spot Race - CatchOut - Android Extras - is on a vacation trip, home before end of few days in jan.

Offline fivesprites

  • Mr. Polyvector
  • ***
  • Posts: 101
    • View Profile
    • FiveSprites
Re: Map Editor implementation
« Reply #4 on: 2013-Mar-05 »
One very simple approach is to use an image to represent your level.  Each pixel represents one tile.  The colour of the pixel indicates the type of tile.

If you need to have more complex layers then you could have further images that represent other information, such as entity locations.

The images are tiny (often a lot less storage space used than XML output from other editors) and it's really easy to implement.

Take a look at the LOADSPRITEMEM() function - this will allow you to read an image into memory and then you loop over the width/heigh of the image and get the colour components.  Compare the r,g,b values with known values in your image and create the tile element in your tilemap arrays.

//Andy



Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4094
  • On the shoulders of giants.
    • View Profile
    • My Apps
Re: Map Editor implementation
« Reply #5 on: 2013-Mar-05 »
Quote
One very simple approach is to use an image to represent your level.  Each pixel represents one tile.  The colour of the pixel indicates the type of tile.
While that can work well you have to be aware that some graphics cards will read the colours slightly differently. You have to be especially careful on mobile devices which may convert your 24bit image into a 16bit one, which again could result in inaccurate map recreation.
I came. I saw. I played.

Offline erico

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 4057
    • View Profile
    • Portfolio
Re: Map Editor implementation
« Reply #6 on: 2013-Mar-05 »
Quote
One very simple approach is to use an image to represent your level.  Each pixel represents one tile.  The colour of the pixel indicates the type of tile.
While that can work well you have to be aware that some graphics cards will read the colours slightly differently. You have to be especially careful on mobile devices which may convert your 24bit image into a 16bit one, which again could result in inaccurate map recreation.

I like that approach, done a few things that way in the past.
Do you think if the map file is an 256color image, respecting its bits or 16bit format the miss color thing could be avoided?
Just wondering.

Offline spacefractal

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 3322
    • View Profile
    • Space Fractal
Re: Map Editor implementation
« Reply #7 on: 2013-Mar-05 »
i thinks this thread should been moved to the glbasic en forum?

Anyway I have used the color thing as well in one game, Cave Heroes, created in BlitzMax:


So its is possible, even with the 16 bit issue. howover if the levels is complex, then this is not the recommered way to do it.

In Greedy Mouse, Im did used Tiled as the level editor, because the levels its self was rather very complex.
Greedy Mouse - Karma Miwa - Spot Race - CatchOut - Android Extras - is on a vacation trip, home before end of few days in jan.

Offline erico

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 4057
    • View Profile
    • Portfolio
Re: Map Editor implementation
« Reply #8 on: 2013-Mar-05 »
Nice! I´m my case, it was a simple top-down view in black and white.
I used that to calculate collisions.
The thing was actually 3d on its visuals.

Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4094
  • On the shoulders of giants.
    • View Profile
    • My Apps
Re: Map Editor implementation
« Reply #9 on: 2013-Mar-06 »
I used the colour=tile approach in my Guru Logic Champs game for the puzzles.
I came. I saw. I played.

Offline matchy

  • Prof. Inline
  • *****
  • Posts: 1538
    • View Profile
Re: Map Editor implementation
« Reply #10 on: 2013-Mar-06 »
So its is possible, even with the 16 bit issue. howover if the levels is complex, then this is not the recommered way to do it.

Agreed and the map needs to end up in an array anyhow, so it takes the same energy to paint it in a map editor with text data than a bitmap paint program.

Offline xxbastianxx

  • Mc. Print
  • *
  • Posts: 38
    • View Profile
Re: Map Editor implementation
« Reply #11 on: 2013-Mar-06 »
Thanks a lot guys, for all the posts!

I watched a tutorial, where a guy is making a Jump N Run with GL Basic and he uses DDgui which is already in the File Samples of GL Basic.

Has somebody of you made good experience with that ? Can you recommend it ?

Offline spacefractal

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 3322
    • View Profile
    • Space Fractal
Re: Map Editor implementation
« Reply #12 on: 2013-Mar-07 »
personally I have allways do my own implemention, so I have full control what it happens. So I can not answear fo that one. Its depend on the game you want to create and how many features its will have....
Greedy Mouse - Karma Miwa - Spot Race - CatchOut - Android Extras - is on a vacation trip, home before end of few days in jan.

Offline erico

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 4057
    • View Profile
    • Portfolio
Re: Map Editor implementation
« Reply #13 on: 2013-Mar-07 »
I think Kitty has the new ddgui going for GACK?, and it looks really amazing!
Here is a video of it in action:
<a href="http://www.youtube.com/watch?v=1_1mjRADpHA" target="_blank">http://www.youtube.com/watch?v=1_1mjRADpHA</a>