Good tool for map creating?

gamersglory

Render & PR Monkey
Donor
Game Developer
Aug 23, 2017
462
452
#2
Making the map clickable involves programming. As for generating a Map never really found a good tool for that
 

enaduo12

New Member
Jun 14, 2017
4
8
#3
there are some cool random map generators on the web




but you have to do the work and adapt them to your game
 
Jun 14, 2018
41
4
#4
Making the map clickable involves programming. As for generating a Map never really found a good tool for that
I am using renpy and I think I know how to make it clickable (there was a simple thread about this) just cutting something on photoshop, match all pixels etc seems a bit hard for me.
 

79flavors

Active Member
Jun 14, 2018
174
212
#5
It's not quite what you asked for (no automatic map generation)... but this thread might offer some extra resources...


But yeah. It's mostly it's just more programming.
I can only speak for RenPy, but for that - you'd create two separate images.
  • (idle) A map
  • (hover) Same map, but with high contrast/brightness/color areas on it.
Then RenPy would use the differences as clickable zones and you'd assign labels associated with each. (go to Library, go home, that sort of stuff).

There's also this thread I found... might offer some insights.


Although from what I've seen, the "imagebutton" statement is the new preferable way of handing this stuff instead of "imagemap". Though I couldn't explain to you why one is better than the other, except that I associate imagemap with rectangular hotspots, where imagemap seems to be better at "not rectangles"... like circular buttons or buttons shaped like houses.

Maybe check out this post (and the whole thread it is part of)..


The thread has details of the differences between the two images you'll need. An includes examples specifically aimed at creating a navigation map.
 
Likes: anne O'nymous
Sep 27, 2018
22
6
#6
You could also opt for a composite rather than a single image, it would grant you the chance to easily edit and fit it to new ideas unless you want to strictly stick to a certain design.

You could have each building as an image (clickable), with some alts for hovering and click, optionally.
Lay those building images around in a blank space (maybe draw a sketch of a map on paper and try to position them where they should be).
Some games (even AAA, by AAA I mean the japanese VNs) stop there but you could improve it further and add background elements with a PSD format which allows multiple layers (again, to easily edit it).

To add those elements with a last single image, you could screenshot the current map and fill the blank space on photoshop by adding a road (draw it as a whole or have it modular like a puzzle) and then add extra stuff like road signs or whatever.
Keep each thing organized and of course disable the layer of the screenshot before saving.
 

79flavors

Active Member
Jun 14, 2018
174
212
#8
I am far from a graphics expert myself. (I'm still using Photoshop 6... NOT CS6... actual 6.0 from Sept 2000).

While trying to figure out how I would do it, I found this website.

I've not checked it's usage restrictions or licencing. If asked, I'd argue out that I'm using their images here for non-commercial educational/training purposes - which I'd consider fair-use. Fingers crossed nobody ever notices. But if you use it, please use your own judgement and investigate more than I did.

But here's how I'd do two navigation map images with my limited skills...
  • Create a map I'm happy with and save it.
  • Draw a selection line around each of your "hotspots". (either a circle, square or a drawn shape around the edge of each icon).
  • I'd add an outer glow to my selection.
  • Then increase the contrast and brightness of my selected area by 30% for each.
  • Rinse and repeat for each of the icons I want to be clickable.
  • Save the new map under a slightly different name.

map1 is your idle image. map2 is your hover image. Though a better name would be map_idle.jpg and map_hover.jpg. Or .png or .webp or whatever format you are using.

Then use the "imagebutton" logic I described earlier.

My very quick and dirty map created using the icograms website ended up looking like this...

AA-NewIcogram 2018-12-04 15_37.png

I could only bothered tweaking 1 house for the purposes of my explanation... it looks like this...
My selection was drawn around the shape shape of the house.
Again, this was just me doing "select house shape", then add glow and increase brightness and contrast of the house shape by 30%.


AA-NewIcogram-house.png

Obviously you could add names next to each house or have the names as being part of the "hover" image only. Or any number other of alternatives, depending on your map and how big each icon/house is.

As I understand it, RenPy would just look for the differences between the two images (the glow and the altered brightness/contrast) and use those to outline the area to be used as a button. You point the imagebutton at a single pixel within the two pictures and RenPy expands outwards from that point until it's figured out the boundaries of the differences. Which was why I chose to increase both the brightness and contrast for the house.

The code example in the other thread looks like this:
Code:
imagebutton auto "city_map_myhouse_%s.png" xpos 1230 ypos 222 focus_mask True action Call("myhome")

Where "%s" is filled in as both "idle" and "hover" by RenPy to give filenames for your two images. "xpos" and "ypos" define a point within your image to look for differences. And "myhome" is a RenPy label to either call or jump to. (I think I'd prefer to jump rather than call - but I guess it depends on how your game is structured).

So you end up with it looking a little like this when you mouse over it...

aa-house-anim.gif

I haven't explained everything. But I hope I've shown that it's pretty easy as long as you can select specific parts of your image and know how to adjust stuff like contrast and brightness of that selected area. The outer glow could be considered overkill.
I'm sure you can find better map graphics than I did. Again, I just wanted to point out that you don't need to be an artist to create a map. Just "borrow" other people's images/tools.
 

79flavors

Active Member
Jun 14, 2018
174
212
#10
RenPy automatically scales any images to the size of game window.
Just play any game in windowed mode and resize the window to any smaller size than your monitor to see it in action. It works the opposite way too on larger monitors like the 4k ones.

I really wouldn't worry too much about graphical fidelity. Players will tolerate all levels of graphical quality as long as the other aspects of your game hold up to scrutiny. Most important of which, is story. But don't underestimate sound to really pull a play in too.

Sure, there are some people who will criticize a game with poor renders. Welcome to the internet.

But there are also a much larger number who will download the "compressed" version of the same game. Where someone on this site takes a game that has 2,000+ 1080p 24bit .PNG images and runs them through a conversion tool to convert all the images into a lossy format of much lower graphical fidelity. Primarily to reduce a game's size down from 4+ gig down to under 600 meg. (sometimes required for an android version).

But on a more realistic level, unless you're using a hand drawn style for your game or something similar, your biggest time sink is going to be Daz3D render times. 1080p renders can already take a small ice age to render already. Honestly, for a first game, with a "normal" computer rig, I'd be tempted to suggest 720p to any new game developer. But unless you have a monster rendering rig, you're probably want to limit yourself to 1080p regardless of all the other considerations.

All of which is a long winded way of saying "1080p is fine".
 
Jun 14, 2018
41
4
#11
Well, I have I5-8400, Asus strix 1070ti A8G (this is overclocked out of the box, but I didn't oc it more because I don't need it currently), 1tb Crucial mx500 2.5", 16GB DDR4. I would call it - midrange gaming pc.
I think I will do it as a hobby, already have a job and my pc is standing for ~10h each day without being used. Not sure how much images can be rendered for 10h but even if I can do 10 at 1080p I am fine with it.
 
Jun 14, 2018
41
4
#12
I own :D and now I have an idea to create the city that I need and to cut all buildings in the position that I want, removing the background of them with PS and add them to an existing background in renpy and make them clickable.
Is my idea even possible or not?