Custom Animations Problem!

[Tatti]

Hello all!

I attempted to make new animations by exploring the possibilities of changing the sizes of old OSI animations. With this, it should have been possible to make actually big dragons, make tigers more real-sized, make small gorillas to act as monkeys and so forth. However I encountered a problem; the changed animation has weird dots, or weird white borders, making it look extremely bad. I was careful to not make them too large or small to look "pixelated". I don't know why this happens but I was hoping someone could tell me what I do wrong? Maybe the backgrond colour needs to be changed or something?

What I did:
1. Exported an animation using mulpatcher's "save to folder"-option.
2. Resized all the .bmp pictures in the animation folder using a batch image editing tool.
3. Imported the animation back using mulpatcher's "load from folder"-option.

Here's a few pictures about the problem too. They contain Finnish phrases too, so sorry about that! Hopefully I posted this to the right category.

 

[Tatti]

A saddened bump.

 

[Milva]

I have never messed with custom animations, have you seen/read this by chance? https://www.servuo.com/threads/how-to-add-custom-animations-to-uo.310/

 

[Hank]

I've had a similar and the same problem before in the past. I remember talking to @m309 about it. I think ares was making the animation art all kinda of funky colors though. Not sure if we ever found a solution.
I was a bit hesitant to reply because i don't know the exact answer.

In a quick attempt to replicate this,. Using uofiddler I exported a frame from a skeleton and made it 2x then replaced the frame. Mine is the same as the OP.

(IrfanView Image Information) Number of unqiue colors: 2681

Spoiler: Other_Information

Resolution: 72 x 72 DPI
Original size: 44 x 132 Pixels (3.00)
Current size: 44x132 Pixels (3.00)
Print size from DPI): 1.6x4.7cm: 0.6x 1.8 inches
Original colors: 16.7 Million (24 BitsPerPixel)
Current colors: 16.7 Million (24 BitsPerPixel)
Number of unique colors: 2681
Disk size: 17.07 KB (17.478 Bytes)
Current memory size: 17.05 KB (17.464 Bytes)

May be that certain colors are not 'friendly' with uo. So when the image is scaled larger the non uo related program doesn't know to not use certain colors. I have no idea atm what determines if the colors are friendly with uo.

Using Gimp to scale the image 2x with the Interpolation set to None. Then exporting it as a bmp and making sure that that I Check the box: Compatibility Options > Do not write color space information

The image turns out fine. (Both images are taken from uofiddler via a screenshot of my desktop)

(IrfanView Image Information) Number of unqiue colors: 149

Spoiler: Other_Information

Resolution: 72 x 72 DPI
Original size: 44 x 132 Pixels (3.00)
Current size: 44x132 Pixels (3.00)
Print size from DPI): 1.6x4.7cm: 0.6x 1.8 inches
Original colors: 16.7 Million (24 BitsPerPixel)
Current colors: 16.7 Million (24 BitsPerPixel)
Number of unique colors: 149
Disk size: 17.07 KB (17.478 Bytes)
Current memory size: 17.05 KB (17.464 Bytes)

This leads me to believe that 1. you cant use 'colors' uo doesn't like and or 2. The way the image file is written (the data) needs to be in a way that uo can understand properly. While this is very cryptic I'm sure someone out there knows the exact details.

However I can not say for sure that this is all one needs to know for when your animations turns into funky colors.

 

[Tatti]

Wow, thanks for quick replies.

Milva, yes, I have read that, though from what I learnt about it I do not believe it has a solution to my problem.

Hank, sorry, as this was months ago I no longer have the files. I figured the problem must have been with pixelation or something and there likely was a tool of some sort to fix that, but that does not fully explain why shrinking things in size also made them weirdly coloured. I could likely reproduce the problem since apparently I wrote how to do it in the first post, lol. However I do remember that in the actual images used for the animation there was no pixelation, not even in the mulpatcher preview window, instead it only showed up in game.

A client issue?

 

[tass23]

I've added quite a few custom graphics to my shard over the years, but I've never run in to this particular problem (granted I am not referring to animations though). What I can tell you is that the compression for a bmp is totally different than any other file format. Indeed, even in more "modern" versions of MSPaint (allowing for 24-bit bmp files), the compression of those bmp files is different as well. While RunUO/ServUO, etc are fairly "recent" in terms of software age, we're still working with a client-base that's over 18 years old. So you have to think in terms of almost two decades ago. I had a brief conversation with the guy that released the Brazilian Mounts on RunUO a few years ago and he told me about similar "pixelation" issues, but alas, he neglected to mention how (all the steps) he actually got around it. Most of "our" 3rd-Party software hasn't been updated in years, which creates a huge problem as OS versions continue to update/change and be forced down most consumer's throats. Anyone that has Windows 7 and tried running Pandora's Box the first time, ran in to such issues (sometimes even the "patch" for PB didn't help and more fixes were needed). I'm sort of in the mindset now that if I want to create new artwork for my shard, I fire up my old Win98SE box and get to work. Perhaps @otimpyre could shed more light on the subject, but I'm not sure if he did any work with animations or if it was all just tile art and gumps.

 

[Hank]

taking my investigation a step further I used ImageMagick to get more information about the two different images to try and better determine why one works with uo and the other doesn't.

Skeleton image that has the black pixels all over and does not show correctly in UO
Warning the 'list' is rather long.

Spoiler

C:\Users\Hank>C:\Utilites\ImageMagick-6.9.1-10-portable-Q16-x64\identify.exe -ver
bose C:\Users\Hank\AppData\Roaming\UoFiddler\skeleton\Testfolder\1.bmp
Image: C:\Users\Hank\AppData\Roaming\UoFiddler\skeleton\Testfolder\1.bmp
  Format: BMP3 (Microsoft Windows bitmap image (V3))
  Class: DirectClass
  Geometry: 44x132+0+0
  Resolution: 28.35x28.35
  Print size: 1.55203x4.65608
  Units: PixelsPerCentimeter
  Type: TrueColor
  Endianess: Undefined
  Colorspace: sRGB
  Depth: 8-bit
  Channel depth:
  red: 8-bit
  green: 8-bit
  blue: 8-bit
  Channel statistics:
  Pixels: 5808
  Red:
  min: 0 (0)
  max: 255 (1)
  mean: 63.9774 (0.250892)
  standard deviation: 73.4529 (0.288051)
  kurtosis: -0.816229
  skewness: 0.73567
  entropy: 0.686757
  Green:
  min: 0 (0)
  max: 255 (1)
  mean: 63.6241 (0.249506)
  standard deviation: 73.0597 (0.286509)
  kurtosis: -0.814393
  skewness: 0.736267
  entropy: 0.686382
  Blue:
  min: 0 (0)
  max: 249 (0.976471)
  mean: 56.142 (0.220165)
  standard deviation: 64.9277 (0.254619)
  kurtosis: -0.673109
  skewness: 0.779198
  entropy: 0.682532
  Image statistics:
  Overall:
  min: 0 (0)
  max: 255 (1)
  mean: 61.2479 (0.240188)
  standard deviation: 70.5896 (0.276822)
  kurtosis: -0.720017
  skewness: 0.767145
  entropy: 0.685223
  Rendering intent: Perceptual
  Gamma: 0.454545
  Chromaticity:
  red primary: (0.64,0.33)
  green primary: (0.3,0.6)
  blue primary: (0.15,0.06)
  white point: (0.3127,0.329)
  Background color: white
  Border color: srgb(223,223,223)
  Matte color: grey74
  Transparent color: black
  Interlace: None
  Intensity: Undefined
  Compose: Over
  Page geometry: 44x132+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: Undefined
  Orientation: Undefined
  Properties:
  date:create: 2015-07-30T23:07:16-04:00
  date:modify: 2015-07-30T23:07:16-04:00
  signature: 322cc5edb10c31c780169ddf68cf7d16dabbc6be8b05ec84bacad2d695af884a
  Artifacts:
  filename: C:\Users\Hank\AppData\Roaming\UoFiddler\skeleton\Testfolder\1.bmp
  verbose: true
  Tainted: False
  Filesize: 17.5KB
  Number pixels: 5.81K
  Pixels per second: 1.936MB
  User time: 0.000u
  Elapsed time: 0:01.003
  Version: ImageMagick 6.9.1-10 Q16 x64 2015-07-25 http://www.imagemagick.org

Skeleton image that does not have the black pixels all over and does show correctly in UO
Warning the 'list' is rather long.

Spoiler

C:\Users\Hank>C:\Utilites\ImageMagick-6.9.1-10-portable-Q16-x64\identify.exe -ver
bose C:\Users\Hank\AppData\Roaming\UoFiddler\skeleton\Testfolder\2.bmp
Image: C:\Users\Hank\AppData\Roaming\UoFiddler\skeleton\Testfolder\2.bmp
  Format: BMP3 (Microsoft Windows bitmap image (V3))
  Class: DirectClass
  Geometry: 44x132+0+0
  Resolution: 28.35x28.35
  Print size: 1.55203x4.65608
  Units: PixelsPerCentimeter
  Type: Palette
  Endianess: Undefined
  Colorspace: sRGB
  Depth: 8-bit
  Channel depth:
  red: 8-bit
  green: 8-bit
  blue: 8-bit
  Channel statistics:
  Pixels: 5808
  Red:
  min: 0 (0)
  max: 255 (1)
  mean: 63.3478 (0.248423)
  standard deviation: 76.1321 (0.298557)
  kurtosis: -0.834526
  skewness: 0.761389
  entropy: 0.681892
  Green:
  min: 0 (0)
  max: 255 (1)
  mean: 62.9972 (0.247048)
  standard deviation: 75.7134 (0.296915)
  kurtosis: -0.835646
  skewness: 0.761051
  entropy: 0.681073
  Blue:
  min: 0 (0)
  max: 247 (0.968627)
  mean: 55.593 (0.218012)
  standard deviation: 67.3407 (0.264081)
  kurtosis: -0.694402
  skewness: 0.805819
  entropy: 0.676658
  Image statistics:
  Overall:
  min: 0 (0)
  max: 255 (1)
  mean: 60.646 (0.237827)
  standard deviation: 73.1742 (0.286958)
  kurtosis: -0.742272
  skewness: 0.792009
  entropy: 0.679874
  Colors: 149
  Histogram:
  2868: (  0,  0,  0) #000000 black
  28: (  0,  0,  8) #000008 srgb(0,0,8)
  8: (  8,  8,  0) #080800 srgb(8,8,0)
  52: (  8,  8,  8) #080808 grey3
  20: ( 16, 16,  8) #101008 srgb(16,16,8)
  20: ( 16, 16, 16) #101010 srgb(16,16,16)
  36: ( 24, 24, 16) #181810 srgb(24,24,16)
  36: ( 24, 24, 24) #181818 srgb(24,24,24)
  28: ( 33, 33, 24) #212118 srgb(33,33,24)
  32: ( 33, 33, 33) #212121 grey13
  60: ( 41, 41, 33) #292921 srgb(41,41,33)
  28: ( 41, 41, 41) #292929 grey16
  4: ( 49, 41, 33) #312921 srgb(49,41,33)
  4: ( 49, 41, 41) #312929 srgb(49,41,41)
  8: ( 49, 49, 33) #313121 srgb(49,49,33)
  60: ( 49, 49, 41) #313129 srgb(49,49,41)
  28: ( 49, 49, 49) #313131 srgb(49,49,49)
  4: ( 57, 49, 41) #393129 srgb(57,49,41)
  16: ( 57, 57, 41) #393929 srgb(57,57,41)
  60: ( 57, 57, 49) #393931 srgb(57,57,49)
  24: ( 57, 57, 57) #393939 srgb(57,57,57)
  8: ( 66, 57, 49) #423931 srgb(66,57,49)
  28: ( 66, 66, 49) #424231 srgb(66,66,49)
  32: ( 66, 66, 57) #424239 srgb(66,66,57)
  16: ( 66, 66, 66) #424242 grey26
  4: ( 74, 66, 57) #4A4239 srgb(74,66,57)
  8: ( 74, 66, 66) #4A4242 srgb(74,66,66)
  24: ( 74, 74, 57) #4A4A39 srgb(74,74,57)
  32: ( 74, 74, 66) #4A4A42 srgb(74,74,66)
  4: ( 74, 74, 74) #4A4A4A grey29
  4: ( 82, 74, 66) #524A42 srgb(82,74,66)
  48: ( 82, 82, 66) #525242 srgb(82,82,66)
  36: ( 82, 82, 74) #52524A srgb(82,82,74)
  24: ( 82, 82, 82) #525252 grey32
  4: ( 90, 82, 74) #5A524A srgb(90,82,74)
  52: ( 90, 90, 74) #5A5A4A srgb(90,90,74)
  44: ( 90, 90, 82) #5A5A52 srgb(90,90,82)
  4: ( 90, 90, 90) #5A5A5A srgb(90,90,90)
  4: ( 99, 90, 74) #635A4A srgb(99,90,74)
  8: ( 99, 99, 74) #63634A srgb(99,99,74)
  72: ( 99, 99, 82) #636352 srgb(99,99,82)
  36: ( 99, 99, 90) #63635A srgb(99,99,90)
  8: ( 99, 99, 99) #636363 grey39
  4: (107, 99, 90) #6B635A srgb(107,99,90)
  8: (107,107, 82) #6B6B52 srgb(107,107,82)
  52: (107,107, 90) #6B6B5A srgb(107,107,90)
  36: (107,107, 99) #6B6B63 srgb(107,107,99)
  4: (115,107, 99) #736B63 srgb(115,107,99)
  16: (115,115, 90) #73735A srgb(115,115,90)
  48: (115,115, 99) #737363 srgb(115,115,99)
  48: (115,115,107) #73736B srgb(115,115,107)
  8: (123,115, 99) #7B7363 srgb(123,115,99)
  8: (123,115,107) #7B736B srgb(123,115,107)
  4: (123,115,115) #7B7373 srgb(123,115,115)
  4: (123,123, 99) #7B7B63 srgb(123,123,99)
  84: (123,123,107) #7B7B6B srgb(123,123,107)
  36: (123,123,115) #7B7B73 srgb(123,123,115)
  12: (132,123,107) #847B6B srgb(132,123,107)
  28: (132,132,107) #84846B srgb(132,132,107)
  56: (132,132,115) #848473 srgb(132,132,115)
  48: (132,132,123) #84847B srgb(132,132,123)
  4: (132,132,132) #848484 srgb(132,132,132)
  12: (140,132,115) #8C8473 srgb(140,132,115)
  8: (140,132,123) #8C847B srgb(140,132,123)
  44: (140,140,115) #8C8C73 srgb(140,140,115)
  76: (140,140,123) #8C8C7B srgb(140,140,123)
  44: (140,140,132) #8C8C84 srgb(140,140,132)
  4: (148,140,123) #948C7B srgb(148,140,123)
  4: (148,148,115) #949473 srgb(148,148,115)
  84: (148,148,123) #94947B srgb(148,148,123)
  60: (148,148,132) #949484 srgb(148,148,132)
  44: (148,148,140) #94948C srgb(148,148,140)
  4: (148,148,148) #949494 grey58
  8: (156,148,132) #9C9484 srgb(156,148,132)
  4: (156,148,140) #9C948C srgb(156,148,140)
  8: (156,156,123) #9C9C7B srgb(156,156,123)
  56: (156,156,132) #9C9C84 srgb(156,156,132)
  48: (156,156,140) #9C9C8C srgb(156,156,140)
  16: (156,156,148) #9C9C94 srgb(156,156,148)
  4: (156,156,156) #9C9C9C grey61
  4: (165,156,148) #A59C94 srgb(165,156,148)
  16: (165,165,132) #A5A584 srgb(165,165,132)
  32: (165,165,140) #A5A58C srgb(165,165,140)
  36: (165,165,148) #A5A594 srgb(165,165,148)
  28: (165,165,156) #A5A59C srgb(165,165,156)
  8: (173,165,140) #ADA58C srgb(173,165,140)
  8: (173,165,148) #ADA594 srgb(173,165,148)
  8: (173,165,156) #ADA59C srgb(173,165,156)
  8: (173,173,140) #ADAD8C srgb(173,173,140)
  32: (173,173,148) #ADAD94 srgb(173,173,148)
  48: (173,173,156) #ADAD9C srgb(173,173,156)
  16: (173,173,165) #ADADA5 srgb(173,173,165)
  8: (173,173,173) #ADADAD grey68
  8: (181,173,148) #B5AD94 srgb(181,173,148)
  20: (181,181,148) #B5B594 srgb(181,181,148)
  36: (181,181,156) #B5B59C srgb(181,181,156)
  32: (181,181,165) #B5B5A5 srgb(181,181,165)
  4: (189,181,156) #BDB59C srgb(189,181,156)
  12: (189,181,165) #BDB5A5 srgb(189,181,165)
  32: (189,189,156) #BDBD9C srgb(189,189,156)
  16: (189,189,165) #BDBDA5 srgb(189,189,165)
  24: (189,189,173) #BDBDAD srgb(189,189,173)
  8: (189,189,181) #BDBDB5 srgb(189,189,181)
  4: (198,189,156) #C6BD9C srgb(198,189,156)
  8: (198,189,165) #C6BDA5 srgb(198,189,165)
  4: (198,189,181) #C6BDB5 srgb(198,189,181)
  20: (198,198,165) #C6C6A5 srgb(198,198,165)
  20: (198,198,173) #C6C6AD srgb(198,198,173)
  24: (198,198,181) #C6C6B5 srgb(198,198,181)
  8: (198,198,189) #C6C6BD srgb(198,198,189)
  4: (206,198,165) #CEC6A5 srgb(206,198,165)
  8: (206,198,173) #CEC6AD srgb(206,198,173)
  4: (206,198,181) #CEC6B5 srgb(206,198,181)
  16: (206,206,173) #CECEAD srgb(206,206,173)
  12: (206,206,181) #CECEB5 srgb(206,206,181)
  8: (206,206,189) #CECEBD srgb(206,206,189)
  12: (206,206,198) #CECEC6 srgb(206,206,198)
  8: (214,206,173) #D6CEAD srgb(214,206,173)
  4: (214,206,181) #D6CEB5 srgb(214,206,181)
  4: (214,214,173) #D6D6AD srgb(214,214,173)
  4: (214,214,181) #D6D6B5 srgb(214,214,181)
  4: (214,214,189) #D6D6BD srgb(214,214,189)
  4: (214,214,198) #D6D6C6 srgb(214,214,198)
  16: (214,214,206) #D6D6CE srgb(214,214,206)
  4: (222,214,181) #DED6B5 srgb(222,214,181)
  4: (222,214,189) #DED6BD srgb(222,214,189)
  16: (222,222,181) #DEDEB5 srgb(222,222,181)
  16: (222,222,189) #DEDEBD srgb(222,222,189)
  8: (222,222,206) #DEDECE srgb(222,222,206)
  4: (222,222,214) #DEDED6 srgb(222,222,214)
  4: (231,222,198) #E7DEC6 srgb(231,222,198)
  4: (231,222,214) #E7DED6 srgb(231,222,214)
  20: (231,231,198) #E7E7C6 srgb(231,231,198)
  4: (231,231,206) #E7E7CE srgb(231,231,206)
  12: (231,231,214) #E7E7D6 srgb(231,231,214)
  4: (231,231,222) #E7E7DE srgb(231,231,222)
  8: (231,231,231) #E7E7E7 srgb(231,231,231)
  4: (239,231,198) #EFE7C6 srgb(239,231,198)
  12: (239,239,206) #EFEFCE srgb(239,239,206)
  8: (239,239,214) #EFEFD6 srgb(239,239,214)
  16: (239,239,222) #EFEFDE srgb(239,239,222)
  8: (247,239,206) #F7EFCE srgb(247,239,206)
  4: (247,239,214) #F7EFD6 srgb(247,239,214)
  8: (247,247,214) #F7F7D6 srgb(247,247,214)
  8: (247,247,222) #F7F7DE srgb(247,247,222)
  8: (247,247,231) #F7F7E7 srgb(247,247,231)
  4: (255,255,231) #FFFFE7 srgb(255,255,231)
  4: (255,255,239) #FFFFEF srgb(255,255,239)
  16: (255,255,247) #FFFFF7 srgb(255,255,247)
  Rendering intent: Perceptual
  Gamma: 0.454545
  Chromaticity:
  red primary: (0.64,0.33)
  green primary: (0.3,0.6)
  blue primary: (0.15,0.06)
  white point: (0.3127,0.329)
  Background color: white
  Border color: srgb(223,223,223)
  Matte color: grey74
  Transparent color: black
  Interlace: None
  Intensity: Undefined
  Compose: Over
  Page geometry: 44x132+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: Undefined
  Orientation: Undefined
  Properties:
  date:create: 2015-07-30T23:07:29-04:00
  date:modify: 2015-07-30T23:07:29-04:00
  signature: 599e590c45333ad683949eea9c2da057cf05e5f17a40395908a3594690c51082
  Artifacts:
  filename: C:\Users\Hank\AppData\Roaming\UoFiddler\skeleton\Testfolder\2.bmp
  verbose: true
  Tainted: False
  Filesize: 17.5KB
  Number pixels: 5.81K
  Pixels per second: 2.903MB
  User time: 0.000u
  Elapsed time: 0:01.002
  Version: ImageMagick 6.9.1-10 Q16 x64 2015-07-25 http://www.imagemagick.org

Most of this information is rather useless and means nothing to most people. The key bit of information that does stand out immediately though is the one that doesn't work is Type: TrueColor & the one that does work is Type: Palette. After seeing it myself it's not suprising. But what exactly does Palette mean...

Well I did a quick google search and I found that in uofiddler 4.6 there is a update log "Fixed ColorPalette Import for animations"
Looking at the uofiddler source code I found this:

Bitmap bmp = new Bitmap(width, height, PixelFormat.Format16bppArgb1555);

https://svn.code.sf.net/p/pol-distro/code/tools/UoFiddler/Ultima/Animations.cs

This code has even more information for anyone who wants to learn more about uofiddler AnimationEdit and the 'Palette': https://svn.code.sf.net/p/pol-distro/code/tools/UoFiddler/Ultima/AnimationEdit.cs



so I looked up what that Format part meant and it lead me here:
http://developer.xamarin.com/api/field/System.Drawing.Imaging.PixelFormat.Format16bppArgb1555/

System.Drawing.Imaging.PixelFormat.Format16bppArgb1555 Field
The pixel format is 16 bits per pixel. The color information specifies 32,768 shades of color, of which 5 bits are red, 5 bits are green, 5 bits are blue, and 1 bit is alpha.

I believe this is what the image needs to be in order to be appropriate for uo animations.
Format16bppArgb1555

I also found this which helps support my theory..
http://wpdev.sourceforge.net/docs/formats/csharp/colors.html

 

[tass23]

@Hank
I can tell you that when it comes to graphic/web design, the "palette" refers to colors that are "web safe". Check out this post on W3Schools:
http://www.w3schools.com/html/html_colors.asp
Basically, in a nutshell, UO was coded to handle 256 colors (the palette colors), which has been obsolete for over a decade now. Modern monitors can support over 16 million colors. So "we're" stuck using 256 colors...unless someone that's really ambitious wants to re-code the client (pretty much creating a new game) so it supports 16+ million colors.

 

[Tatti]

Hello all, and first off thanks for the great advise.

I got my problem solved, the key seemed to be with setting interpolarisation to none. I had to download a different batch image editing plugin for GIMP to do that, which is probably why it never occured to me

So for those interested here's how to resize already existing animations in an easy way.
1. Use mulpatcher to save an animation to a folder.
2. Use BIMP to resize all the images in the folder. Make sure interpolarisation is set to none.
3. Use mulpatcher to load an animation from folder.

I wanted to thank you somehow, so here's an example: an ape.vd you can use for your pleasure.

 

[thistle]

also in your graphics you cannot use 00000 black and 00000 white in your graphic or graphic bleeds during conversion to .bmp
optimpyre has tutorials on youtube under eddie steel ,very good tuts.

 

[nipa]

@Hank can you make a small gimp tutorial (with screenshots) on this issue?

 

[[REDACTED 11626]]

Maybe they are still lurking, but chances are they left since the last post was 2021.