Map Example

This example demonstrates how to create and manipulate a map in akesi lili. It showcases how to move the map using button inputs and draw it on the screen. This is useful for creating scrolling or moving backgrounds in games.

Explanation

The code initializes a game state with camera settings and a text message. It updates the camera position based on button inputs and draws the map and the text on the screen. The map can be moved using the arrow keys, providing a dynamic view of the game world.

Code

s={
 x:0,
 y:0,
 spe:1,
 text:'Move map by buttons',
 text_w:CHAR_W*19
}

export update=||
 if btn 4
  s.x=(s.x+s.spe).min(0)

 if btn 5
  s.x=(s.x-s.spe).max(-((MAP_W*SPR_W)-DIS_W))

 if btn 6
  s.y=(s.y+s.spe).min(0)

 if btn 7
  s.y=(s.y-s.spe).max(-((MAP_H*SPR_H)-DIS_H))

export draw=||
 cam s.x,s.y
 map 0,0,0,0,MAP_W,MAP_H
 cam 0,0
 fill_rect 2,2,6+s.text_w,6+CHAR_H,3
 rect 2,2,6+s.text_w,6+CHAR_H,0
 txt s.text,4,4,0

How It Works

1. State Initialization: The game state s stores the camera position (x, y), movement speed (spe), and UI text information.

2. Input Handling: The update function checks for directional button presses (4=Left, 5=Right, 6=Up, 7=Down):

   • When moving left or up, the position is increased (bounded by 0 to keep the map from scrolling too far)
   • When moving right or down, the position is decreased (bounded by the negative map size to prevent scrolling beyond the map edge)
   • The bounds ensure the camera only shows valid map areas that fit within the display

3. Camera Movement: The cam() function sets the camera offset, which affects all subsequent drawing operations until it's reset.

4. Map Rendering: The map() function draws the entire tile map (from cell 0,0 with dimensions MAP_W × MAP_H) at the camera-adjusted position.

5. UI Overlay: After resetting the camera with cam(0,0), the UI is drawn in fixed screen coordinates:

   • A filled rectangle creates a background panel
   • A border is drawn around the panel
   • The instruction text is displayed on top

This creates a scrollable map view with a fixed UI overlay that remains stationary while the map moves beneath it.