What do you mean by a "grid smaller"? By default the map uses 16x16 sized tiles which will emulate the size used by Pokémon games.
For the UI you'll want to draw shapes and images. For a UI over a map you'll need to know how to set a render script. The functions that'll come in handyy for you:
Rectangle(x, y, w, h, color);
FilledCircle(x, y, r, color, anti-alias);
OutlinedCircle(x, y, r, color, anti-alias);
OutlinedRectangle(x, y, w, h, color);
Point(x, y, color);
Image.blit(x, y);
Image.blitMask(x, y, color);
Image.rotateBlit(x, y, radius);
SetClippingRectangle(x, y, w, h); // useful for minimaps or picture-in-picture stuff
SetRenderScript(script);
SetLayerRenderer(layer, script);
Font.drawText(x, y, text);
WindowStyle.drawWindow(x, y, w h);
You can only set one RenderScript at a time, so usually the simple method is to attach a single render method to the render script and then from there render everything you need. Like so:
This tutorial will draw a rectangle to screen at (0, 0) with 100 pixels width and 12 height. This can simulate a health bar for example.
function game()
{
// ...
SetRenderScript("MyRender();");
// ...
MapEngine("your map.rmp", 60); // make sure this is called last
}
var Red = CreateColor(255, 0, 0);
function MyRender()
{
Rectangle(0, 0, 100, 12, Red);
}
Notice the render scripts do not require the use of a FlipScreen call. This is because the map engine will do it for you anyways. Now, to get it to react to health takes a tiny amount of math:
var Red = CreateColor(255, 0, 0);
var White = CreateColor(255, 255, 255);
var Black = CreateColor(0, 0, 0);
var Font = GetSystemFont();
var hp = 50;
var maxhp = 50;
function MyRender()
{
Rectangle(0, 0, (hp / maxhp) * 100, 12, Red);
Font.setColorMask(Black);
Font.drawText(1, 1, hp + "/" + maxhp);
Font.setColorMask(White);
Font.drawText(0, 0, hp + "/" + maxhp); // will be drawn on top of the hp gauge
}
Then if you minus numbers from the hp variable, the healthbar will shrink from 50 pixels down to 0. Notice it also displays the numbers too!