Legacy Forum

A forum dedicated to the BYOND game Legacy
 
HomeFFL HUBPortalGalleryFAQSearchMemberlistUsergroupsRegisterLog in

Share | 
 

 How to make your first Icon V0.9 ***Tutorial Update***

View previous topic View next topic Go down 
AuthorMessage
Halkel
Moderator
avatar

Posts : 270
Join date : 2008-07-29
Age : 28
Location : Final Fantasy Galaxy in Super Mario Galaxy

PostSubject: How to make your first Icon V0.9 ***Tutorial Update***   Thu Jul 31, 2008 12:08 am

Table of Contents
Version Info [ST1]
Introduction [ST2]
About Dream Maker [ST3]
Making a Map Icon [ST4]
Portrait Making [ST5]
Battle for Glory [ST6]
Main States [ST6A]
Status Abnormalies [ST6B]
How to make the Icon [ST7]
Bases for easier Custom Work [ST8]

Version Info: [ST1]

0.9:
Better explaination on how to make Overworld and Battle States
Images to show what I mean

0.7:
Seperated the howto from the Map State Section.
Bases moved from Search Code [ST7] to [ST8]

0.6:
Introducing the Dream Maker to new Iconners.
Information edited slightly to fix typing errors.
New State introduced in the update (battle_victory) has been added
Updated with Status States

0.5 Revised:
Bases have been added

0.5:

Tutorial Started
All required states added, this excludes status


Introduction: [ST2]

Iconing is simple yet complex. so here's how it works. In FFL, the states are split into 3 categories: Portrait, Battle and Map. Map states are 16x16 always. Battle are optionally 32x32 where Portraits are Always 32x32 When applying them into an icon file, these must has a ratio scale of 2:1 meaning all pixels in the icon must be doubled in size when completed.

About Dream Maker: [ST3]

Dream maker is the application used for coding, mapping, and iconning that comes with the application Byond (if you don't have it, look harder or you've been ripped off). Icons are at a scale of 32x32 pixels and has two styles, Animated and Static that can be conjured between two types, Movement and Static. You can have 2 states of the same name, as long as one is Static and one is for movement. The State Type can be modifyed in two different ways:
Right clicking the icon and select "Edit State".
or
Double clicking the name of the state.

The great thing about this is that you're the boss, and you can do anything with your icons. If it's for a game with rules on Icon Upload, follow these rules properly otherwise you'll be in trouble.

Animated States are moving sprites, you can set it between 1 direction, 4 directions or 8 directions. As FFL uses only 4, use up to 4. The Animation screen shows Framerates above each frame (default = 1) You can change these by double clicking. Double clicking the "Frame Box" enters Edit Frame Mode where you can modify your graphics. Static States are just 1 Frame in one direction, more commonly used as Map Tiles or States that are facing one way with no animation. When Pasting from outside apps or files works as well, the sprite is pasted at the Top Left corner of the sprite (unless in the edit screen, where it's the bottom left). If the sprite is Exceeded it's limit, the left and/or bottom of the image is cropped and moved to the top or right of the new Frame created. These frames are numbered from the top left first in this fashion:

1 2 3
4 5 6
7 8 9

A 96x96 sprite was pasted in Dream Maker's State Viewer:

FFL's Restrictions recommend you to enlarge 16bit sprites rather then using 32bit. How does this work? 16bit is half of 32, so you can use MSPaint's Stretch and Stew feature to make it like that without affecting the colour. This applys also to Portraits and Battle States. Read on to learn how to make them.


Fig 1. The complete Bard Icon

Making a Map Icon: [ST4]

Map icons have 5 states, all of which are fit into a space of 16x16 pixels when scaled down. the states here are:

normal: your movement state
in: movement in Water or Forest. It's best to copy your normal state and remove the bottom half or make it transparant.
lift arm: Inn state after you rest at an inn
look down: Can be seen if someone rests in an inn and you're there
fallen: an optional action*
action_<name>: Any term with "action_" infront of them are custom actions that you can use in a custom icon.*

*Action Verb only states

Portrait Making: [ST5]

Wanted to make Sailor moon in the Style of FF4 or edit a screen shot for a mug shot, Portrait Making is not as hard as Battle States. The word you need is "portrait"

Portraits uses 4 states, named portrait1 to portrait4. It's arranged like this:

2 4
1 3

Easy Peasy. Now make a portrait 32x32, but with a pixel ratio of 2:1 See the image below to see how it'll works.


Fig 2. A portrait of Ami Mizuno split into 4 states.

Battle for Glory: [ST6]

Battle states, I seriously don't wanna start there. These states come in numbers. Anyways, All battle States have "battle_" infront of the state type. and the order is like this:

4 2
3 1

Note: You don't HAVE to use all 4 states here. The most important one is the two numbers on the right.

[IMG][/IMG]
Fig 3.1. Konata Battle Icon, it uses state slots 1 and 2 for alive, with 1 and 3 for dead


Fig 3.2. King Boo Battle Icon, its size uses all 4 slots.

Main States for Battle: [ST6A]

The main states are shown with "battle_" infront of the following words:

walk: Normal stance, set as a movement state
parry: Ready to make an attack or parrying
lattack_attack: attack with left hand, replace lattack with rattack for right hand
lattack_stance: Before the attack stance, replace lattack with rattack for right hand
special_stance: For Charges of Jump, Build up, DarkWave and so on
special_attack: Non Magical Attack action for Cry, Strengthen, Jump, Kick and so on.
magic_stance: Magic Charge
special2_attack: Bard was the only class to use this state. Its used for the Hide State or other extra states
item: Item and Victory pose (was modified to make it just used for item poses)
hit: accepting damage from an attack
ndead: when you HP is critical
dead: HP = 0 D=
victory: When you win basically. This can be either a custom thing or just your normal first frame of "walk" and the "item" states.

Example of layout: battle_hit1, battle_dead3 and so on

Status Abnormalies: [ST6B]

**Note** These are not required as it works during PVP battles. Here's all the states available, don't forget that battle states have the text "battle_" before the following words:

venom: Poison status
hold: Paralysis status
stone: Petrification, Simular to death
silence: Mute basically
sleep: Character is asleep
cry: When a character is hit by the White Twin's Cry move
curse: Curse Status

How to make the Icon [ST7]:

You will need the following:
  • MSPaint x2 (one of which will be used as a guide for legit icon sizing, the other is to hold the sprites you make)
  • Dream Maker (To create the icon)
  • Icon Upload in Legacy


Overworld Sprite Creation:

  1. Open MSPaint, and set its size to 16x16.
    Windows 7 users have this button. <img> click it and select Pixels then change it to 16x16 (uncheck the checkbox Maintain Aspect Ratio first)
    Windows XP and lower users, click Image on the menu bar under the title bar then select Attributes... Set the size to 16 width and height in pixels.

    <screens here>

  2. Open another MSPaint window, this will be used to hold the sprites you made up to now. You may open another to hold a spritesheet you're gonna edit from if you're gonna edit the sprite.

    <screens here>

  3. Skip this step if you are making from scratch. Take an overworld sprite from your spritesheet and place it into the 16x16 space. Be sure the ratio is still 16x16 after transfering it.

    <screens here>

  4. Create the sprite of the character you wanted to make. Use the zoom feature to make editing easier and use Ctrl-G to create a grid.
    Windows 7 users can zoom in using the slider on the bottom right (max 8x)
    Windows Vista users can zoom in using the slider after selecting the magnifying glass button in the toolbar (max 8x)
    Pre-Vista users can select the magnifying glass and click 8x after (if you know how to access this, you can find a secret 10x zoom by clicking a very small area under the 8x Zoom)

    <screens here>

  5. When done, cut the sprite from the 16x16 space, and paste it into the blank MSPaint Window, repeat until you got all the sprites you need.

    <screens here>


Battle Sprite Creation:
  1. In the window used to make the overworld sprites, flood the 16x16 canvas in a color you’re not using.

    <screens here>

  2. Resize the canvas to 32x32. Afterwards, copy the whole shape, paste it and rotate it 180% with transparency on so you get what looks like a grid of 4 squares. This is how you know how the sprites split when you import it into Dream Maker.
    Warning: Windows 7 Users will need to keep an eye on this part of the status bar and drag the corner until it says 32x32.

    <screens here>

  3. Skip this step if you’re making from scratch. Copy the Battle sprite from your spritesheet and move it into the far right side of the 32x32 canvas, with as much of the sprite within that side as possible.

    <screens here>

  4. Create the sprite of the character you wanted to make. Use the zoom feature to make editing easier and use Ctrl-G to create a grid.

    <screens here>

  5. When done, cut the sprite from the 32x32 space, and paste it into the MSPaint Window containing the sprites you made from the last step, repeat until you got all the sprites you need. Keep the whole grid that contains the more than one color within it (BG and one other, even if it is just a line or pixel) as this will help when importing them into Dream Maker, which will be explained later.

    <screens here>


Coming soon, how to make the portrait then how to apply it to an icon file.

External Sources: [ST8]

Special Thanks to Frying Tonight and Harken for the links of the following Bases.


These are map states, The styles in Final Fantasy 5.


Same style but these are Battle States. Some are missing however.

Sciach got us some FF Sprites from the Nintendo Era, FF1-6, Have a look if you wish to use them.

***NOTICE: Final Fantasy 6 sprites are only good for Battle States, Please Refrain from using them for Map States.***

Classic (S)NES:

Final Fantasy 1 sprites
Final Fantasy 2 sprites
Final Fantasy 3 sprites
Final Fantasy 4 sprites
Final Fantasy 5 sprites
Final Fantasy 6 sprites

GBA Remake:

Final Fantasy 1 GBA sprites
Final Fantasy 2 GBA sprites(Battle sprites & Normal portraits)
Final Fantasy 2 GBA sprites(Firion Overworld sprites & Emotion portraits)
Final Fantasy 2 GBA sprites(Maria Overworld sprites, Battle sprites, & Normal portrait)
Final Fantasy 2 GBA sprites(Minwu Overworld sprites, Battle sprites & All portraits)
Final Fantasy 2 GBA sprites(Ricard Overworld sprites, Battle sprites & Status portraits)
Final Fantasy 4 GBA sprites(All Overworld sprites & Misc. Sprites)

That's about it.


Last edited by Halkel on Mon Jul 04, 2011 6:44 pm; edited 14 times in total
Back to top Go down
View user profile http://halkeldathunderhog.sheezyart.com
Frying Tonight
Small Stream
avatar

Posts : 10
Join date : 2008-07-29

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Thu Jul 31, 2008 3:30 pm

Hai.
Just thought this thread might want these, which I found on the internet back in the day. They're just blank sprites that you can just get to scribbling all over. It saves editing the FF4 sprites if you're desired target looks nothing like them.
http://illiweb.com/fa/pbucket.gif
http://illiweb.com/fa/pbucket.gif
Back to top Go down
View user profile
Halkel
Moderator
avatar

Posts : 270
Join date : 2008-07-29
Age : 28
Location : Final Fantasy Galaxy in Super Mario Galaxy

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Thu Jul 31, 2008 3:38 pm

I remember those.Used them before. The sprite style is Final Fantasy 5. I'll add them.
Back to top Go down
View user profile http://halkeldathunderhog.sheezyart.com
Halkel
Moderator
avatar

Posts : 270
Join date : 2008-07-29
Age : 28
Location : Final Fantasy Galaxy in Super Mario Galaxy

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Fri Mar 06, 2009 12:56 am

Small update, See Above for the update.
Back to top Go down
View user profile http://halkeldathunderhog.sheezyart.com
Sciath
Small Stream
avatar

Posts : 27
Join date : 2009-05-26
Age : 28
Location : Northern New Jersey

PostSubject: Final Fantasy Sprite Resources List   Wed May 27, 2009 12:16 am

[Final Fantasy Sprite Resources]

<--------------------->

Section I: The Main Sprites

Final Fantasy 1 sprites
Final Fantasy 2 sprites
Final Fantasy 3 sprites
Final Fantasy 4 sprites
Final Fantasy 5 sprites
Final Fantasy 6 sprites

<--------------------->

Section II: Re-releases and Supplementals


Final Fantasy 1 GBA sprites
Final Fantasy 2 GBA sprites(Battle sprites & Normal portraits)
Final Fantasy 2 GBA sprites(Firion Overworld sprites & Emotion portraits)
Final Fantasy 2 GBA sprites(Maria Overworld sprites, Battle sprites, & Normal portrait)
Final Fantasy 2 GBA sprites(Minwu Overworld sprites, Battle sprites & All portraits)
Final Fantasy 2 GBA sprites(Ricard Overworld sprites, Battle sprites & Status portraits)
Final Fantasy 4 GBA sprites(All Overworld sprites & Misc. Sprites)


<--------------------->


More to come, hopefully, maybe.



Last edited by Sciath on Mon Jun 01, 2009 1:08 pm; edited 1 time in total
Back to top Go down
View user profile
renkozuku
Summer Rain
avatar

Posts : 34
Join date : 2009-04-04
Age : 25
Location : Upper Darby, PA

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Wed May 27, 2009 8:52 pm

Sciath wrote:
[Final Fantasy Sprite Resources]

<--------------------->

Section I: The Main Sprites

Final Fantasy 1 sprites
Final Fantasy 2 sprites
Final Fantasy 3 sprites
Final Fantasy 4 sprites
Final Fantasy 5 sprites
Final Fantasy 6 sprites

<--------------------->

Section II: Re-releases and Supplementals


Final Fantasy 1 GBA sprites
Final Fantasy 2 GBA sprites(Battle sprites & Normal portraits)
Final Fantasy 2 GBA sprites(Firion Overworld sprites & Emotion portraits)
Final Fantasy 2 GBA sprites(Maria Overworld sprites, Battle sprites, & Normal portrait)
Final Fantasy 2 GBA sprites(Minwu Overworld sprites, Battle sprites & All portraits)
Final Fantasy 2 GBA sprites(Ricard Overworld sprites, Battle sprites & Normal/Status portraits)
Final Fantasy 4 GBA sprites(All Overworld sprites & Misc. Sprites)


<--------------------->


More to come, hopefully.




I love you =3
Back to top Go down
View user profile
tylerdurdend11
Dew Drop


Posts : 4
Join date : 2009-10-15

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Mon Oct 19, 2009 8:26 pm

Can you talk to me like I'm 5 years old and explain this again? Also, assume I have no idea how "dream maker" works.
Back to top Go down
View user profile
Halkel
Moderator
avatar

Posts : 270
Join date : 2008-07-29
Age : 28
Location : Final Fantasy Galaxy in Super Mario Galaxy

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Mon Oct 19, 2009 8:45 pm

I'm working on screenshots, but i also have a life so patiences.
Back to top Go down
View user profile http://halkeldathunderhog.sheezyart.com
tylerdurdend11
Dew Drop


Posts : 4
Join date : 2009-10-15

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Mon Oct 19, 2009 8:50 pm

Thank you!!
Back to top Go down
View user profile
zysin5
Dew Drop
avatar

Posts : 3
Join date : 2011-06-04
Age : 40
Location : Clearwater FL

PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   Tue Jun 07, 2011 7:09 am

Thanks for making this post! I am very interested in learning how to do this.. I like being self taught, but a little reading and can do spirit normally allows me to do anything I want to do..
But its very helpful to have this information...

Thanks again.. BTW-- This is the best game on byond I have had the chance to play! Really, this takes me back!!!
So I will work on some of this when I have time off work.. thanks again for the info.

If I learn anything new myself that might help other new comers I will be sure to add it here or re edit my post.
Back to top Go down
View user profile
Sponsored content




PostSubject: Re: How to make your first Icon V0.9 ***Tutorial Update***   

Back to top Go down
 
How to make your first Icon V0.9 ***Tutorial Update***
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Maru Jin ( How to make ur Avatar Icon looks cool)
» How to make Slings with Green Stuff (quick tutorial)
» URBAN ICON Highpoint used to be called what???
» CSM: Icon Bearer
» other miniature companies who may make trolls?

Permissions in this forum:You cannot reply to topics in this forum
Legacy Forum :: Graphics :: Spriting & iconing-
Jump to: