Jump to content

A Visual Guide to Uploading Sprites


Fathuran

Recommended Posts

 

Hey fellas, I get a lot of folks asking me about things such as how to upload images to the wiki, especially in-game sprites. So, here goes!

 

First off, you'll need a copy of the server's resources, which you'll find here. Once on that page, go ahead and download the zip.

 

TPYuSjX.png

 

Once your download is complete, go ahead and extract the Paradise-Master folder wherever you please using your preferred extraction software.

 

After that, go ahead and open the Paradise-Master folder and you'll be presented with many other folders and other nonsense. For now, find the icons folder and open that sucker up.

 

[Click the image to enlarge it.]

 

4HrDd2Y.png

 

Once in icons, navigate to the mob folder and open it up. Depending on your list settings, you should be presented with a large amount of .dmi files with names such as AI.dmi , Alien.dmi , and so on as well as a few other folders. Accessing any of these .dmi files will open up BYOND's Dream Maker program. Depending on your settings, you may not see the .dmi extension, but it's a matter of preference.

 

For the purposes of this tutorial, access the human.dmi file. Not human_face.dmi , human_dam.dmi, or any of those. Just plain human.

 

When the Dream Maker program has loaded, you'll see a window with all the sprites in human.dmi - Go ahead and follow the image by double clicking on the sprite labeled body_m_s

 

[Click the image to enlarge]

 

xmPgXIn.png

 

Upon clicking the sprite, the window will change to show only your chosen sprite, as well as in its four facing directions.

 

For the purposes of this tutorial, please double click the south facing sprite.

 

After that, you should see what looks to be a simplistic painting program that allows you to edit things by the pixel. This blank human character will be referred to as a paper doll for the rest of this guide.

 

Using the aforementioned side panel in the previous image, we can navigate all the .dmi files in a similar manner to browsing the folder. However, when you access .dmi files in Dream Maker, it will open up a new tab, allowing you to quickly switch between sprites that you are working on.

 

Go ahead and use the side panel to navigate to scroll to human_face.dmi and double click it. Once human_face.dmi is opened, it will switch to that tab automatically. Go ahead and grab something like a hairstyle or a facial feature, or something else if you wish. Go ahead and put skrell tendrils on a human head if you so desire. Remember to use the South facing sprite!

 

[As always, click the image to enlarge.]

 

45miHJI.png

 

Once the sprite is selected and the proper facing chosen, you'll have another simple editor for the sprite. Now, in order to place sprites on top of each other, it's a very simple matter of using the CTRL+C copy function, switching back to the paper doll, and pasting with CTRL+V.

 

hoMDdY8.png

 

Keep in mind that sprites WILL overlap each other. Place large articles first. Or else you might have a beard that's tucked into a jumpsuit!

 

Now that you know how to combine sprites. Feel free to browse the rest of the .dmi files and attach whatever you please. Go wild! Place a big bushy beard on an unathi, dress up a sprite, or what have you. Within the mob folder, you'll see things such as feet.dmi , hands.dmi , and so on. These are the sprites of various articles of clothing how they appear ON a character. So, feet.dmi shows all possible footwear in the game as it appears on a character. Icons for inventory sprites are located elsewhere, and you're encouraged to look around the resource.

 

Now then, let's dress up our wonderful paper doll, you go ahead and do it too, however you like. We'll come back in a few minutes!

 

vplXlSH.png

 

Alright, that was fun! Now. Whether you dressed up a paper doll, or you simply want to take a plain sprite, let's say you want to upload the image to the wiki. That's easy as well, however there's a step we need to take beforehand.

 

We can't upload .dmi files to the wiki, which is fair enough. So, we need to convert the sprite to one of the proper formats, which can be any one of: png, jpg, jpeg, and gif.

 

Here's how you do it.

 

Once you are happy with your sprite, or you find what you want, click the Back Arrow once, so that you are on the page with the four different facings. You will see that your edited southern facing human model still has its new appearance. Go ahead and right click that, and select export. You can then save the model wherever you'd like and in whatever format you prefer. I personally like to have both a copy of the DMI and a PNG on hand.

 

J2ECt3Q.png

 

Do NOT save or save as the file! This will edit the sprite you are playing with in the resources, so either reverting or re-extracting them is the way to go if you mess up. If you want to make -new- sprites, then click file, and select the 'New' option.

 

However, if we upload it in its current x32 state, the sprite we have will be terribly blurry line and just won't look good at all. So let's fix that! Open up an appropriate image editing tool that is not Microsoft Paint! Using MS Paint will remove the backround transparency of images, which is a problem of its own. Backgrounds on wiki images should be transparent.

 

The program that has been recommended to me, as well as is my own personal choice, would be Paint.net. Once you have loaded the image in the program, go ahead and choose the resize option, to which you'll be brought to a window where you can edit the dimensions. Be sure to set the resampling to Nearest Neighbor to ensure a reduction of the image artifacts.

 

8TjYpFH.png

 

Now that we have PNG [Or whatever format you chose] file of the desired sprite, let's upload it!

 

Head on over to the Paradise wiki. On the left you will see a 'Tools' dropdown menu. In it, you'll find a link called "Upload File."

 

6jZxkTu.png

 

After following the link, you'll see a pretty basic looking upload page. Click upload file, select your properly formatted image, name it, and so long as the name isn't conflicting, your image is now on the database!

 

However, not many people sift through every single image to see what's there. So it's up to you to take the initiative and fill in the blanks for images! If you uploaded it, then put it in the right place!

 

So, for example, let's go ahead and put this new sprite in an appropriate location. (Don't do as I do. We don't need a bunch of people uploading a ton of test images, only upload relevant or needed items.)

 

In order to place a file on a page, you simply need to place its FULL name onto a page.

 

9JicGmC.png

 

So, we go ahead and plop it down wherever needed and there we go! You now have an image on a wiki page.

 

I hope this guide was somewhat useful to you. If you didn't know before, I hope now you know how to figure out how to navigate Dream Maker and create/edit sprites and dress paper dolls. Good luck and happy editing!

 

--

 

Special thanks to Tigercat2000 for educating me on how to upscale a sprite so it's not a blurry mess. Most images should be upscaled to 64 bit, but without a proper editing program, you'll have a very blurry image when you resize it. A program like Paint.net will alleviate any stresses and will make images look much cleaner when uploaded to the wiki, improving the project as a whole.

 

A wonderful thank you to Index for reminding me, as well as all of you, to be sure to select Nearest Neighbor when upscaling a sprite to prevent artifacts. This will ensure you have a clean sprite to upload to the wiki!

 

PS: Stay tuned for another thread which will be Part 2 of this guide, which will go through formatting a wiki page.

 

Edited by Guest
Link to comment
Share on other sites

 

Nice guide, very well presented and informative. I would, however, clarify that the scaling option you want to use to avoid making the image blurry is called 'Nearest Neighbor'. If you use Paint.NET (which I highly recommend) the resizing menu will look like this; select the red and black outlined option.

8TjYpFH.png

 

Link to comment
Share on other sites

Thank you very much for bringing that up! When Tiger was walking me through the process, the Nearest Neighbor function was explicitly said to make the effort worth it. I will update the OP with what you pointed out, and you have my thanks. This guide is as much mine as it is anyone else's, so efforts to improve it will always be accepted.

Link to comment
Share on other sites

 

Great, thanks for the guide, it was very helpful.

 

Uploaded a better sec pod pilot image, still seems to be blurry though so I may have messed something up. Just need to work out how to get it onto the page....

 

EDIT: Damn, I think I see where I went wrong. When I changed it to "nearest neighbor" it reset the size to 32X32 and I didn't notice. Something to be aware of. If my image isn't useful, just delete it.

 

Link to comment
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use