Page 1 of 1

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 4:27 am
by Josh Dagreat
I've created an image that I would like to display on a new scroll. I used Gimp to write a .tga file of the image. I've determined that the code to put on the scroll should look like:





So far my testing has yielded only some blank white squares on the scroll.

1) Which directory should I put the .tga file in? (The only examples I've been able to find are apparently using images out of Morrowind.bsa.)

2) What is the maximum width and height I can make the image? (I can probably figure this out on my own if I could only get the image to appear.)

3) When I use the Gimp functionality "Save as TGA"
- Should I have "RLE compression" checked?
- Should I have "Origin at bottom left" checked?

Any help would be greatly appreciated. Thanks!

Debi

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 8:05 pm
by Jessica Colville
OK, after much investigation I figured out the file has to go in Data Files\BookArt.

With help from my hubby we also figured out that the image width and height have to be a power of 2. I know squares work. I haven't tried rectangles yet.

I know .bmp files work. I haven't retried .tga files yet.

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 9:58 pm
by Mandi Norton
2) What is the maximum width and height I can make the image? (I can probably figure this out on my own if I could only get the image to appear.)

Images for scrolls must be 377x253 or smaller.
3) When I use the Gimp functionality "Save as TGA"
- Should I have "RLE compression" checked?
- Should I have "Origin at bottom left" checked?

You can use dds. This is better.

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 11:11 pm
by Laura
From my experience, the image itself has to be a 256x256 square (or smaller.)
But I've never tried 377x253 or anything else.
The format can be in .bmp,.dds or .tga

3) When I use the Gimp functionality "Save as TGA"
- Should I have "RLE compression" checked?
- Should I have "Origin at bottom left" checked?

I've never noticed any differences between these options. From what I've seen, they make no difference and just selecting the default choices seems to work fine every time I've used them for making Icons or Book Art.

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 9:05 pm
by john palmer
I'm using images that are 512 X 512 and they work fine, but they're resized to 240 X 240 in the image tag in the book otherwise they don't show up, and just appear as blank squares.

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 9:27 pm
by k a t e
From my experience, the image itself has to be a 256x256 square (or smaller.)
But I've never tried 377x253 or anything else.

This size for the image tag, but not for themselves images. As described above, large images resized.

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 9:39 pm
by Céline Rémy
Thanks for the info, guys!

Here's what worked for me:

* Image width and height in pixels both have to be powers of 2. (Well, this is what worked for me.)
* The usable width is close to 390 pixels.
* I made an image 512 x 1024 with a 390 pixel wide graphic image centered in the 512 width.
* I removed the alpha channel since it seemed to not work for me, so I ended up using 24-bit color.
* I got a .tga file to work with no problem using this method, but I had trouble getting my own bitmaps to work even though the Bethesda ones work fine.

Question:

Why is a .dds file better than a .tga file?

Note:

If anyone wants to download my mod "What's on the Menu?" and see how I did this and offer some constructive criticism I'd be grateful.

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 3:24 am
by michael danso
Thanks for the info, guys!

Here's what worked for me:

* Image width and height in pixels both have to be powers of 2. (Well, this is what worked for me.)
* The usable width is close to 390 pixels.
* I made an image 512 x 1024 with a 390 pixel wide graphic image centered in the 512 width.
* I removed the alpha channel since it seemed to not work for me, so I ended up using 24-bit color.
* I got a .tga file to work with no problem using this method, but I had trouble getting my own bitmaps to work even though the Bethesda ones work fine.

Question:

Why is a .dds file better than a .tga file?

Note:

If anyone wants to download my mod "What's on the Menu?" and see how I did this and offer some constructive criticism I'd be grateful.


.dds (DirectDraw Surface) was designed for DirectX SDK, which long answer short allows better render compression to save on video memory. Hope I didn't butcher that too badly. I've always used TARGA when editing and have yet to experience any problems however. It might be dependent on your card and driver. :unsure:

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 7:28 pm
by Dustin Brown
Thanks for the info, guys!

Here's what worked for me:

* Image width and height in pixels both have to be powers of 2. (Well, this is what worked for me.)
* The usable width is close to 390 pixels.
* I made an image 512 x 1024 with a 390 pixel wide graphic image centered in the 512 width.
* I removed the alpha channel since it seemed to not work for me, so I ended up using 24-bit color.
* I got a .tga file to work with no problem using this method, but I had trouble getting my own bitmaps to work even though the Bethesda ones work fine.

Question:

Why is a .dds file better than a .tga file?

Note:

If anyone wants to download my mod "What's on the Menu?" and see how I did this and offer some constructive criticism I'd be grateful.


Hi DebiDalio

Don't worry about the tga dds debate - use what looks best for you in game - I sometimes use tga othertimes use dds dxt3 no mipmaps for really crisp face images

Thought I'd add a link to the menu font Bethesada use it's called http://www.dafont.com/dali.font and can make your scrolls look a little more authentic either if you use it when creating your image or for the an ingame ground mesh (the piece of paper you pick up of the table)

Playing with scroll images is always fun and with a little experimentation you can achieve some cool effectsfor your in game placement versions - here's a http://img166.imageshack.us/img166/5285/skscroll.jpg I worked on last year

Nice mod you made - I see you are already getting some good comments on which shows your work is appreciated :)

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 8:13 pm
by Dezzeh
Thanks for the link to the Dali font. I used Comic Sans MS for my menu. I was trying for a hand-printed look. (Well, someone with very neat hand printing.)

Wow, that's a cool scroll you made!

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 3:03 am
by Danger Mouse
Your mod looks like a very good idea, especially for starting characters with a low alchemy skill. Your scroll images would definitely benefit from using alpha channels though, to remove the blank background.

I've been working with .dds files for a while now, using the dds plugin for photoshop. I find it very reliable (just remember to flatten your images before saving to avoid the occasional "too many channels" error message). I don't know if there's a similar plugin for Gimp, but there probably is one out there. I find that dds dxt3 with no mipmaps (that's the dds type with explicit alpha) works best for book art (particularly line art). It gives nice crisp images, as Illuminiel mentioned, which is perfect for detailed line art. I've converted all my old .tga files to .dds and I'm never looking back.

This is an example of using an alpha channel to best effect when using a simple line drawing (works with either .tga or .dds). In this case you want everything except the lines to be invisible so the scroll or book texture can be seen underneath. For full color plates, you can simply block out the whole image, but for line drawings, or anything else that you want the paper texture to show up underneath, you want to use an alpha channel like this one. In fact, for this line drawing, the alpha channel is doing all the work. The actual image is just a black square, that way the antialiasing on the alpha channel picks up more black and not some other color that you don't want to show up on the scroll.

This is the alpha channel: http://img714.imageshack.us/img714/1097/alphaexample.jpg

As mentioned before, in this case the actual image is just black. The alpha channel is completely determining what the drawing will look like. If you're using colored images, you will want the alpha channel to block out the image like this, but you would still have an image, and not just a black square. If you want the drawing to look more sepia toned, like Illuminiel's scroll, you would either keep the drawing as is, or fill the entire image completely with a layer of sepia tones. The alpha channel would still be doing most of the work in the latter case.

This is what the finished product looks like in the game: http://img232.imageshack.us/img232/3636/mapsofv09.jpg

Also, check out a lot of the free font sites out there as well. There's a lot of decent free fonts out there, and a few good ones that look like hand printed lettering. Never settle for comic sans. Comic sans is the most maligned font on the planet for a good reason. :P

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 5:02 am
by Marta Wolko
Stuporstar, thank you for all of your advice. I don't completely understand it all yet as I only vaguely know how to use Inkscape and Gimp. (Dammit Jim, I'm a programmer, not an artist!) I definitely want to use transparency so the scroll texture can be seen beneath the lettering. I'm going to look for better fonts, also.

Looks like I have some research and studying to do. :)

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 11:35 pm
by how solid
Aha! Just did an experiment with a 256 x 512 image with an alpha channel in Gimp. Merged (not flattened) all layers so that there's only one then wrote a .tga file. The image displayed fine on the scroll and the background showed through. Progress! (Doing the happy dance...)

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 9:02 am
by Lauren Denman
Oh dear. I just spent a few hours downloading fonts. I'm doomed!

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 9:31 pm
by Steeeph
Just an FYI: In my experience, with Bloodmoon installed (not sure about earlier versions), images for scrolls can be as big as you want in the HTML (as long as the actual images is power of 2 of course) but if they're too wide for the screen the edges get cut off (you get a scrollbar if it's too tall, but no horizontal scrollbar).

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 4:04 am
by Vincent Joe
Are you using the GoTY edition? Because I'm still using first release versions of Morrowind and all the expansions, and I get a blank square if I make the image too big...even with the correct patches installed. :glare:

@DebiDalio Hehe, Finding new fonts does take hours because there's so many out there to try out. I currently have a couple hundred...and yet I still find myself using Adobe's Charlemagne for a lot of my books (the font used in the map I posted). I have to pick through my hundreds of fonts looking for good alternatives just so all my books don't end up looking the same. I just find most of Adobe's fonts really classy. They have some world class fontographers working for them. It's too bad they're really expensive to buy if you don't get them already packaged with photoshop. I'm a bit of a font geek (I loved the Documentary Helvetica...I wish there were more good documentaries about fonts).

The Daedric font is also very useful, and can be downloaded from the Morrowind Imperial Library http://www.imperial-library.info/daedric/.

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 9:24 am
by Scared humanity
Are you using the GoTY edition? Because I'm still using first release versions of Morrowind and all the expansions, and I get a blank square if I make the image too big...even with the correct patches installed. :glare:

Nope, no GOTY. If you look at the scroll that shows the stone locations in Bloodmoon (can't remember the id, sorry) - the image is set to be slightly wider than the scroll can display, so the edges get cut off (and apparently this was deliberate, since the image does fit with that). Try it with 1px borders round it and see where it cuts off.

Generally I've found scrolls will take any image I throw at them, it's books that get finicky. :shrug:

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 2:36 am
by k a t e
Ah ok, I was adding an image to books not scrolls. That must be why I was experiencing a problem then.

How to display an image on a scroll?

PostPosted: Wed Aug 19, 2009 9:44 pm
by Emmi Coolahan
I have the original version of Morrowind with Tribunal and Bloodmoon also installed.

@ melian - I see exactly the behavior you see.

I believe Alan Brank in that the maximum width on a scroll is around 377 pixels. It will apparently scroll to whatever length you want.

@Stuporstar - I also sometimes get white squares if I do something "wrong" with the image on a scroll, where I'm not entirely sure what all the aspects of "wrong" are. I believe that if an image width and/or height is not a power of 2 it will display a white square. I also believe that if the channels are not set up properly (too many layers? alpha channel not done properly?) that it will display a white square.

Thanks for the link to the Daedric font! I had forgotten it was there.

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 12:29 am
by Loane
Morrowind is a bit picky with images.

The power-of-2 rule works, except for 2x2. At least, DDS requires images be 4x4 at the smallest. Prolly not an issue here, but... ;)
There is often a limitation on how much the dimensions can vary. 512x512 will always work, 512x1024 pretty much always, but some cards have problems with 2x4096 or other extremely rectangular shapes. Also, square textures take less memory than rectangles, generally (given how the data is placed in memory, aligning it to a page size or such will optimize loading and retrieval).

For TGA, I usually leave RLE off. You want origin in the top-left (DirectX style), with channel order RGBA. TGA supports a number of variants, but Morrowind doesn't work with all of them. Uncompressed top-left is your best bet. TGA is a decent quality vs size format, but DDS (properly set up) is the best overall.

DDS allows compression and higher quality images than TGA. Morrowind supports the standard DDS variants (DXT1, DXT3, DXT5) as well as a few higher-end formats (I've used up to 16 bits per channel, IIRC). DDS also support both binary and interpolated alpha channels, so you can make smooth fades. DDS has a number of compression settings, from none (which makes it about the size of and potentially higher quality than TGAs) to extreme compression (much smaller, a bit of quality loss). All the compression options have quality options, so you can do production-quality compression (1/4 the size of a TGA, visually no difference, in good cases). That's with nVidia's real DDS exporter, I don't know how crippled the GIMP one is. DDS has quite a few settings for the format, so you need to play with it to get the balance you're looking for, but once you get it setup nicely, it's well worth it. DDS tends to be more compressible than TGA in the end, as well (using WinRAR or another mod packager).

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 8:18 am
by Quick Draw III
Hey, peachykeen! Thanks for the detailed info. That helps a lot.

I'll have to look into a DDS generator at some point. I use only free tools (like Gimp and Inkscape), so I'll poke around on the web and see what I can find. Recommendations are gladly accepted. :)

How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 10:14 am
by LADONA
I just remembered that there's an HTML file on the TESCS CD, with these useful bits of advise:

The book pages in Morrowind are this wide:
===========================E
The scrolls are this wide:
======================================================E

Images for books must be 198x350 or smaller. Images for scrolls must be 377x253 or smaller.


How to display an image on a scroll?

PostPosted: Thu Aug 20, 2009 3:39 am
by Jordan Fletcher
I'll have to look into a DDS generator at some point. I use only free tools (like Gimp and Inkscape), so I'll poke around on the web and see what I can find. Recommendations are gladly accepted. :)

http://developer.nvidia.com/object/texture_tools.html includes command line tools enabling batch conversion to DDS.

The Elder Scrolls Construction Set Wiki has a list of other http://cs.elderscrolls.com/constwiki/index.php/DDS_Tools you may find useful.