The fabled tutorial thread on ViewingDale

[Redrobes]

Ok thats icons done to death what about images ?

ViewingDale uses a custom image file format for a number of reasons but the main one is performance. The data is reformatted so that it can display them very fast. Its also adds some tags to the images not present in any of the file formats so that when the app is run it does not have to work these out each time. Anyway suffice it to say that you gotta get your image into VMI format. The app has a built in converter.

By pressing F2 you get the Icons and Images menu and on there is the Import Image option which gives a dialog like this:

You have to load in a color and a transparency image or you can load in a PNG file with both color and transparency. Either way, it will show the image seperated into its color on the left, transparency in the middle and combined on the right. You can import a BMP, JPG or PNG file. You can try a TIF file too and it might work. You can use any image from very small to very large tho if larger than 2048 square then it will resize it down. In fact it will usually resize the import anyway but its very generous and almost always upsamples it using a good algorithm so you don't notice. Anyway, once you have something correct on the right panel you can save that image. It asks you for a name and a directory to place it into. The directory will always be under the Images base directory. ViewingDale will not make icons out of images outside of its directory structure. Theres a good reason for that too... later.

So you should be able to save an image as a VMI file.

There is an app that ships with it which is the batch PNG file converter which will change over a whole directory and subdirectories of PNG files into VMI files. You still need to make icons for them all but at least half the work can be automated.

Thats about all there is to know about images.

[Redrobes]

There are several ways to create a new icon. The first and most obvious is to tell it which image to use. That can be found under the Menu / Images and Icons or by pressing F2. From there you will see an option "Create New Icon from an Image". With that you run through a sequence of dialog options where it asks you for the name of the new icon then asks where you want to save it then it brings up a similar file selection box where you select the image to use and then it creates that icon for you. Unfortunately it creates it with the origin in the middle and at 1mx1m which is not always the best. The idea is to then edit it and resize it up to be correct.

But maybe you knew all along how big this icon was supposed to be. There is now a wizard where you set the name and image to be used and you set the width and height and whether the origin is in the middle or bottom left corner. Most people use this one now because even if you have to edit it your normally closer to where its supposed to be.

There is another option where you can create a new icon which is a clone of an existing icon. With that option you can, for example, take an icon of a chair and make a new one called giantchair and then point it at chair and it will make a new one with same image and same size and origin. Then you can edit it so as to make it much bigger. Then you have two icons sharing the same image but of different sizes. This is also useful when you need different child icons for the same main icon or image. Another good reason to use this option is when you have say an Inn and want to put it down on a city. If you place that Inn down directly then any modifications to that inn will be done across the world. If you clone it you can call it something specific like "TheGreenDragonInnInWaterdeep" or whatever and then it will be unique.

Lastly you can take a screen capture as the image and make a new icon. You supply the name but the size is taken from the screen scale so that its exactly correct to match up with the current view. This is especially useful when you have say a few huts on a regional map and you want to make a new village map and get those huts down onto their own map. You can take a screen shot covering the village, add the huts to that new icon lining them up with the backdrop image then replace the backdrop image with a clear image and put it back on the map. Delete the old huts and allow the new ones to show from the new icon.

There's one more special option. You can create a Contact Sheet of all the icons in a directory. It makes a new clear icon and add one of each icon you have in the selected directory and labels it for you. It names the icon _contactsheet so you will find it at the top of all icons in that directory.

[Redrobes]

On that menu there is the option to load an icon. Thats the 'L' key and just loads an icon from a file selecton of icon files.

There is no save. ViewingDale saves everything all the time. There is an undo for the child edit by pressing 'U' but normally all actions are done and saved instantly.

The refresh is rarely used as this is only useful if you externally edit a file like an icon text file using a text editor and then you can refresh the screen.

The images and icons are stored as files in directories under the main installation dir. If you pick these file up and move them then they will be badly referenced from child icons or icons will call up bad pathed images. So in order to move these files and fix up all the references to them there are two options to move an icon or move an image. You should use these if you really need to or else you could find yourself looking at text file references to fix !

You can change the current icons image with an option here which can be quite useful.

Set the icons size means to do what the Edit Size mode does only with numeric input. So you can specify that this battle map is exactly 100 yds by 200 yds for example.

Adding a child icon we mentioned earlier.

There are the special icons you can add. The main one is text. By pressing T you get an edit box where you can type in some text, select its color and it will appear as a child icon on the current icon. When editing it you will note that it does not have a green handle because text always rotates so that its horizontal. You must remember that all icons in ViewingDale may be used multiply and in different orientations and scales. The extents box for text is thus circular to depict where text might possible lie at any rotation.

Next on the Child Action types is a jump. You can put down the blue and yellow marker with the arrow on it and select another map to jump to. This is useful for going up stairs entering buildings or just having a list of maps to index.

You can add a link to a document too. That can be a text file, a doc, rich text or whatever. You can set the document reader so if all your docs are PDF say then thats ok too.

Theres picture links too of course. By default the app is tied to the ViewingDale Picture Viewer which is a super fast simple image display. Again tho, you have the option of opening with any image viewer that can take a command line parameter for the image to look at.

You can add a sound link as well which can add some atmosphere to your gameplay.

Next is a web link where you can link to any web page like this one !

Finally there is a general file link. Some caution here is that it will launch whatever file is behind the link. That might not be a good idea if you get the map from someone you dont trust. But there is the possibility that you can run your own program or something unusual.

You can check out some of the links in the demo download. In that mini map is a link to text, a picture, and a jump to another map.

[Redrobes]

No mapping app would be complete without some grids. By pressing 'G' and 'H' keys it toggles through the three types of grid. There is square grid and two types of hex grid with hexes going horizontally or vertically. So 'G' toggles square grid on and off, 'H' does hex-horz, hex-vert, and then off.

By pressing F3 or using the main menu button you can find the Visual Settings Menu. On here you can see the home key listed, the hot keys for the four view modes then the grid options.

From here you can set the grid size which brings up a text box where you enter it in. You can put in "10" for ten meters. You can also put in "10m", "10 meter" or "10 meters" and get the same thing. You can put in "5ft" "5 foot" or "5 feet". You can put in "3.72 inches" or "21.5 miles" "50 yds" "100 yards" or even "20 leagues". It has a wide variety of length units in imperial, metric and some extra ones like "AU" for astronomical units and "ly" or "lightyears" tho to be honest parsecs and lightyears are not worth using. ViewingDale has a map range of about 50 AUs to about 0.1mm

With the 'J' key you can toggle the grid color from black to white.

If you are editing the child icons then you can snap the movement of them to the grid. You need the grid enabled and you must press 'S'. When you do this it will show that you have snap enabled on the menu bar. Now when you grab a child and move it, it snaps to the nearest grid intersection. This is also true of rotate where the grid intersection closest to the mouse is used as the rotation target.

Note that the grid always originates from the current icons origin.

To finish off this menu, the set scale allows you to type in an exact numeric scale instead of zooming to it. Good for when viewing real world sized maps at 1:60 for example.

Hide banner hides the top menu bar, banner, status text thing. Thats useful if your using a projector and want a really uncluttered projection down on the table. With no menus open its all map.

Adjust Child Cut Off we will talk about next...

[Redrobes]

When editing the child icons I mentioned that all the children should have their extents box within the boundary of the current icons extents. This is not strictly enforced by the app but it does lead to problems with display and screen saves if you don't do it. Its not strictly enforced because if you had some clear bit of the icons image over the edge then it does not matter and the app cant be bothered to keep looking at whether the image is clear or not when your moving.

When you have this hierarchy which is very deep going from the world down to small things like carts with hay bales on the back then the app has to draw that whole world except that its smart enough to know what it needs to and what it can ignore. Firstly anything that's too far off the left or right edges don't need to be drawn and things too small don't need to be either. So how small is too small ? Well that depends and thats what the Child Cut Off limit is all about.

When that option is put up then unlike most of the dialog options, this one a) gets rid of all the parent dialogs leaving just itself behind and b) normally when you open a dialog then it sorta blurs the map but with this one it does not.

It has a red bar and a + and - button. By moving the slider to more and less then when it draws the screen it cuts off drawing small icons based on this limit. Sometimes you really want to see all the detail in the map. So go for a small setting. Sometimes its better if it cuts off the child hierarchy levels much quicker so go large.

When its small the map has more to draw and might take longer if it has a lot of small stuff on it. So to some extent it matters what speed your PC / graphics card is too for the right setting.

Now if a level in your hierarchy is too far to the left or right so that none of it is within the draw area then not only is that icon not displayed but the app assumes that since all the children of it were also within that icon then it does not have to go down any farther and clip the whole hierarchy tree off at that point. So had you have had some children off to the right of an icons boundary and then moved that icon off the screen left then that child would suddenly vanish when its parent left the draw area. So that's why you should not do it.

Now given that in any one scene if you have an area with very small regions on it that have even smaller battle maps going on then it makes no difference how complicated those battle maps are because it wont try to draw them anyway. As you move in on them then sure they need to be drawn but some of the other stuff has moved out of view so now does not. At a certain level of PC / Graphics card power you find that all but the most contrived scenes can be done at a real time rate - and fortunately, so long as we don't squander that power, that's where we are now.

Note the chests in this set of four images as we zoom out. Now the app doesn't just pop too small icons out in a blink. It fades them out so that it looks a little nicer. I should also add that this is with the Child Cut Off set quite high because normally its set to fade out at just a few pixels.

[Redrobes]

If you want to save a map then we need to be a little clearer about what that means since each icon is like a map in its own right. With ViewingDale you save out the screen image only with a few options. So you need to pan and zoom to the right part of your map first before saving the view. If you have a grid on then you get a grid with the saved image. You get the annotations and jump markers unless you hide them. The only thing you wont get is the main view border, top banner and bottom status bar which are not part of the map.

To get to the save menu item its on the System Settings or F4 and the bottom option. It brings up a dialog panel like this:

Initially it will have the dots per inch set to your real monitors current DPI rating. The scale will be as you had it at the point of hitting the button. Now with these two values and the current window size, all the rest of the numbers are derived. You can change any of the numbers from here and the related ones will change to match the right math. I.e. you can change DPI to 300 and the width and height in pixels will adjust.

Say you have a 300 DPI printer and want to print a battle map for real miniatures. Then put 300 in the DPI and 60 in the scale (1 in = 5ft ). The rest will adjust and you had better hope your map is small enough to fit on the paper. If you had an A4 300 DPI printer and dont care what the scale comes out at so long as it fits then put 300 in DPI and either 11 in Width or Height depending on whether you want landscape or portrait.

Style is one of two options. As seen on screen or the Color / Alpha pair. The first is what you would expect. The map rendered out to a bit map. The second option saves two bitmaps, one with full color and the second is a greyscale of the combined Alpha / Transparency masking for the whole scene. Ask me if you want to see this or know more.

You set the path or filename and then the format which should be either BMP, JPG or PNG.

It also displays an estimate of the file size tho its pretty rough because its highly dependent on the compression in the PNG / JPG cases tho it should be accurate for BMP.

When it saves the scene it re-renders the whole scene again at the scaling required to get the right output bitmap size. Therefore it does not merely scale the current screen image up or down to fit. So if rendering much larger then detail will be saved not seen on the screen. The grid and the child cut off apply to the save process scaling so that items which were faded out might not be on the save. Same with grid. If the grid was too small to be seen then it might appear on the save if the save image is higher res.

The app has been tested to save at up to 20,000 pixels square in BMP mode. Its a bit less for PNG - something like 14,000 square. The process for the BMP save has been particularly optimized for using a small amount of memory whilst it does it but if saving huge images, it still helps to have a lot of RAM.

[Redrobes]

That covers most of the things you need to know to use it - well at least from a mapping point of view. Theres a whole heap like that on the VTT and networking side as well. The tut was a bit light on nice maps to show but I have focused more on the concepts. If you want to ask questions then fire them off below and ill write more on that area.

If you did want to see more maps rendered out of the app showing the CWBP (as it was quite a long time ago) then this thread has a few movies to watch.