Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Tutorial: How to create a minimap in Smile Game Builder
#1
(copied from "The Oceans Will Have Us All")

Hi, I'm going to do a few tutorials in Smile Game Builder showing some of the tricks I've used in The Ocean Will Have Us All.
If you have trouble seeing any of the images try right clicking and selecting "open image in new tab."

First up, here's how to make a simple mini map in SGB.


[Image: bdc3af96ed9aa872852d2242ca199f05646fac34.jpg]

Load up the map you want to create a mini map for.
Oh look, we already have a little map there. That's handy. Let's use that.
Take a screenshot and crop it down to just the minimap

[Image: ccb83af3ee1b47ee91373fe6c2524a317eb1b745.jpg]

Step 2
Resize your cropped image to match the size of your map. We want it at the scale of 1 block: 1 pixel.

So the map I'm using here is 11 by 20 blocks (you can find this in the map settings) so I resize the image to 11x20 pixels. Make sure to use "nearest neighbour" resizing.]

The image is very small. We could zoom the image in SGB, however it will use a blurry bicubic resizing algorithm. I prefer sharp, clear pixels so let's resize it in our image editing software.
I've resized this one by 400%. Make sure to use "nearest neighbour."

I've then also converted it to greyscale (optional.) Save your map image to a folder.


Step 3.

Create a one colour dot image. If you've resized your image to 400% create a 4x4 pixel image.

Save this into your folder with the map.

Step 4.
Import the images into SGB.
[Image: V6fzBqz.png]
No website, but find me on Save-Point's Discord and buy me a coffee dammit!

Currently working on TO THE VICTOR...
Upcoming projects:
Beta Origins: Supernova Saga (Sci-Fi RPG) | Lost Days (Post Apocalyptic First Person RPG)
Reply
Thanks given by:
#2
[Image: 8f83a6e3695351c3178421dde29b90effc6b468c.jpg]

Add assets > Game images > Images. Click "Add."

[Image: 592b132a1f34b8dd4a0b2f28775ed0c0ff64a3a7.jpg]

Create an "advanced event" on an empty block on your map.

[font='Motiva Sans', Arial, Helvetica, sans-serif][Image: c27123afa8e726ce5353c62bc404c111c63e56fe.jpg][/font]

Set the event to "Automatically Start (Synchronize and Repeated.)
Add a wait event, 0.1 seconds.



Step 6.
Add a "Display Image" event. Choose your map image, press "Select..." and drag the image to your desired location on the screen.


[font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][Image: e9cf34fcd8ddc79e1411dc6adcdab8fc5cf0252d.jpg][/font][/font]
Step 7.
We now need to calculate where we will display the player dot on the screen.

Add an "Advanced Variable Box Op" event. We want to use a new variable and name it "PlayerX." Assign "Player Position", "X Coordinate."
Add another "Advanced Variable Box Op" event. This time use a new variable named "PlayerY" and assign "Player Position", "Y Coordinate."

[font='Motiva Sans', Arial, Helvetica, sans-serif][Image: ec019ac7666d7672f19672eeae0e9731bd09d040.jpg][/font]
Step 8.

As I've resized my map by 400% we will need to multiply our coordinates by 4 times each.

[font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][Image: c65258343b626a3954fa5c765268335f74d5626f.jpg][/font][/font]

Create two "Variable Box" events for the PlayerX and PlayerY variables to multiplay them each by 4 times.


Step 9.

Create a "Variable Box" event. Look at the X coordinate you've used on the "Display Image" event for the map. Use that number and add it to the "PlayerX" variable.
Create another "Variable Box" event. This time add the value of the Y coordinate for the map image to the "PlayerY" variable.



[font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][Image: 7237958e7712d21db4741cce6a57e0985bd876d6.png][/font][/font][/font]

Step 10.

And finally we display our player dot.

[font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][Image: 419b44c3c9a25b73ec808f2824409d04da1be3b4.jpg][/font][/font][/font][/font]

Add another "Display Image" event. Make sure to assign a different "Image display number." Select the "Assign by Variable Box" radio button. Set X to the "PlayerX" variable. Set Y to the "PlayerY" variable.

[font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][Image: 1c31511c9ff4f551716aa3b3681d7c1e078d6244.jpg][/font][/font][/font][/font][/font]
Step 11.

Test the game. You should have a minimap on the screen showing the players current position. Yay. Wow. Nice.

[font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][font='Motiva Sans', Arial, Helvetica, sans-serif][Image: 7e9ef4f8b7980ffb5ccb1e56122e29345730421b.gif][/font][/font][/font][/font][/font][/font]
[Image: V6fzBqz.png]
No website, but find me on Save-Point's Discord and buy me a coffee dammit!

Currently working on TO THE VICTOR...
Upcoming projects:
Beta Origins: Supernova Saga (Sci-Fi RPG) | Lost Days (Post Apocalyptic First Person RPG)
Reply
Thanks given by:


Possibly Related Threads…
Thread Author Replies Views Last Post
   Game Variables kyonides 0 1,533 08-17-2020, 04:38 AM
Last Post: kyonides
   A Layman's Thoughs on Game Music DerVVulfman 2 2,744 09-01-2019, 03:32 AM
Last Post: DerVVulfman
   Mascots In Your Game (Basics) DerVVulfman 0 1,992 11-09-2018, 06:19 AM
Last Post: DerVVulfman
   A Guide to Properly Testing an RPG Game DerVVulfman 0 2,536 09-12-2018, 03:43 AM
Last Post: DerVVulfman
   Liberated Pixel Cup Tutorial DerVVulfman 2 5,276 08-30-2013, 03:23 AM
Last Post: DerVVulfman
   Simple Blood Tutorial ClockworkAngel 6 12,787 04-19-2012, 01:24 AM
Last Post: yamina-chan
   Shapeshifter Tutorial KasperKalamity 0 3,628 04-01-2012, 09:17 PM
Last Post: KasperKalamity
   MetalRenard's Music Tutorial Thread - Videos! MetalRenard 14 15,378 02-15-2012, 10:12 PM
Last Post: MetalRenard
   [Pixel Art] Cactus Tutorial Kain Nobel 1 7,129 11-01-2011, 01:04 PM
Last Post: MetalRenard
   A game is like a book... DerVVulfman 0 2,591 05-17-2011, 05:14 AM
Last Post: DerVVulfman



Users browsing this thread: