[EO]Character description (New Character menu)

[tsuki]

Hello people, this if my first tutorial. I know it's very simple but I hope some people find it useful.

**Only Client-side**

In this tutorial I'll teach you how to change the default sprite with pink background to a custom image with class description (or anything else you want)

**The default Character Creation Menu:**
[](http://www.freemmorpgmaker.com/files/imagehost/#f4d137879f5a17c39fe761e810c15cc2.png)
**After modification:**
[](http://www.freemmorpgmaker.com/files/imagehost/#1d509bc7afedea0bb174aa2bd86400ed.png)

Before start tutorial I'll explain the concept for the newbies.
When you open the character creation menu theres a picturebox named picSprite that shows the sprites of the selected class. What I did was create another picturebox where I'll be showing a custom image with the same selected sprite's name.
Let's start.

For this tutorial I'll be using an image that I created quickly just for it. I'll be attaching all the images used and the blank model, but it's very recommended that you create your own models for more exclusive game graphics.

**1.** Open the frmMenu and click on the picturebox named picCharacter.
**2.** Inside picCharacter create another picturebox named picDesc or whatever name you want (but remember that picturebox's name must be matching with the code)
**3.** Set the size of the picDesc for same size of your custom description image. (in this tutorial I've used 385x137 but you're free to use any size you want, just remember that picturebox's size and the image's size must be matching)
**4.** Set the BorderStyle of picDesc to **0 - None**
[](http://www.freemmorpgmaker.com/files/imagehost/#b8be7f3b7dd1596805372f730628f0e4.jpg)
**5.** Be sure that picDesc is above the picSprite and **DON'T** delete the picSprite
**6\.** Arrange the position of the elements as you want
**7.** **Go to modDirectDraw7 > Public Sub NewCharacterBltSprite** and find these lines:

```
    If frmMenu.optMale.Value = True Then
        Sprite = Class(frmMenu.cmbClass.ListIndex + 1).MaleSprite(newCharSprite)
    Else
        Sprite = Class(frmMenu.cmbClass.ListIndex + 1).FemaleSprite(newCharSprite)
    End If
```
and chage them to

```
    If frmMenu.optMale.Value = True Then
        Sprite = Class(frmMenu.cmbClass.ListIndex + 1).MaleSprite(newCharSprite)
        frmMenu.picDesc.Picture = LoadPicture(App.Path & "\data files\graphics\picdesc\" & Sprite & ".jpg")
    Else
        Sprite = Class(frmMenu.cmbClass.ListIndex + 1).FemaleSprite(newCharSprite)
        frmMenu.picDesc.Picture = LoadPicture(App.Path & "\data files\graphics\picdesc\" & Sprite & ".jpg")
    End If
```
**8.** Create the picdesc directory

The **\data files\graphics\picdesc\** is the the directory of the description picture.
The **frmMenu.picDesc** is the frame name

**OBS:** In case of you use same sprite for different classes, do a copy of the sprite, because the displayed picture's number will be equal with the selected sprite's number.

Sorry about my english, I'm form Brazil.  :embarrassed:

Hope someone find it useful.

[erkro1]

Nice tutorial and very well explained ;)

[tsuki]

@Erwin:

> Nice tutorial and very well explained ;)

Thanks Erwin  :cheesy:

[SpiceyWolf]

OMG since the EO 1 ive been tryna figure out how to do that… i am kinda stupid arent I? i can figure out complicated stuff and not something like a menu... eh i get knocked around enough as it is... there ive been punished already XD and all too many times by god... im on his bad side >.> dont even know what i did Dx

[tsuki]

@SpiceyWolf:

> OMG since the EO 1 ive been tryna figure out how to do that… i am kinda stupid arent I? i can figure out complicated stuff and not something like a menu... eh i get knocked around enough as it is... there ive been punished already XD and all too many times by god... im on his bad side >.> dont even know what i did Dx

It means you liked my tutorial?  :P

[Savents]

Thank you very much for this, this makes my game look a lot more professional, I also added in another picture box that uses .bmp so I can have two images on screen.

Thanks again.

[tsuki]

@Savints:

> Thank you very much for this, this makes my game look a lot more professional, I also added in another picture box that uses .bmp so I can have two images on screen.
>
> Thanks again.

I'm glad it's been helpful for you.

[Connor]

Very helpful for us beginners, thanks.
Taught me a lot about editing the GUI, you have been a massive help in my attempts to learn VB6\. :)

[tsuki]

@Connor:

> Very helpful for us beginners, thanks.
> Taught me a lot about editing the GUI, you have been a massive help in my attempts to learn VB6\. :)

I'm glad it helps you :cheesy:

If someone have any suggestions or questions about the tutorial, just ask me  ;)

[Connor]

@Jimmy:

> I'm glad it helps you :cheesy:
>
> If someone have any suggestions or questions about the tutorial, just ask me  ;)

I don't have any suggestions, but a question.
When I did this, I ended up with an ugly white border around my image, are you sure you use a picturebox and not an image?

Cause I couldn't seem to make it go away.  :P

[RyokuHasu]

On the properties pannel there is a thing labeled "DorderStyle" set that to None

[tsuki]

@Connor:

> I don't have any suggestions, but a question.
> When I did this, I ended up with an ugly white border around my image, are you sure you use a picturebox and not an image?
>
> Cause I couldn't seem to make it go away.  :P

[](http://www.freemmorpgmaker.com/files/imagehost/#b8be7f3b7dd1596805372f730628f0e4.jpg)

in BorderStyle select **0 - None**

I'll update the original post.
Thanks for remember me.

Tell me if this fix the white border for you

[Connor]

Alright, I'll post once I've done it all again.
Oh, and how do you make the buttons on the image work?

Sorry for all the questions, but yeah. Haven't done any GUI based stuff before.

[SpiceyWolf]

@Jimmy:

> It means you liked my tutorial?  :P

OH YES I DO VERY MUCH*big hugz* :P

CRAP how do i delete this? i dont wanna be in trouble for double post Dx

[SpiceyWolf]

@Connor:

> Alright, I'll post once I've done it all again.
> Oh, and how do you make the buttons on the image work?
>
> Sorry for all the questions, but yeah. Haven't done any GUI based stuff before.

Dp you meen your buttons dont show up anymore?

heres a few solutions…
if your placing the buttons over the desc pic right click the desc pic and choose send to back.
(the buttons with gui will have to have a picture OF the buttons on desc pic for them to show up without hovering the mouse over first)

if you edited the main picture for it... ull have to (like i said earlier) on that ACTUAL picture place a picture of ur buttons... they dont show up till u mouse hover...

if you made new buttons that were created IN the desc item pic delete those and make them over the empty space(root of frmMenu) and then put bring to front with right click and move them over top

Hope i helped :P

Erm sorry on double post dont know hwo to quote 2 people at once >.>

OH PS on ur border problem... if you mark borders as 0 and then make the desc pic just a lil bit smaller then the actual size(meening shorten it from the bottom going up and right going left... so the top left point where it starts is still in same place... ) the image its loading will still stretch it back out to the right size but since its still smaller it will fill over the spot(since theres no border) without worrying of empty space appearing around your picture

[Connor]

@SpiceyWolf:

> Dp you meen your buttons dont show up anymore?
>
> heres a few solutions…
> if your placing the buttons over the desc pic right click the desc pic and choose send to back.
> (the buttons with gui will have to have a picture OF the buttons on desc pic for them to show up without hovering the mouse over first)
>
> if you edited the main picture for it... ull have to (like i said earlier) on that ACTUAL picture place a picture of ur buttons... they dont show up till u mouse hover...
>
> if you made new buttons that were created IN the desc item pic delete those and make them over the empty space(root of frmMenu) and then put bring to front with right click and move them over top
>
> Hope i helped :P
>
> Erm sorry on double post dont know hwo to quote 2 people at once >.>
>
> OH PS on ur border problem... if you mark borders as 0 and then make the desc pic just a lil bit smaller then the actual size(meening shorten it from the bottom going up and right going left... so the top left point where it starts is still in same place... ) the image its loading will still stretch it back out to the right size but since its still smaller it will fill over the spot(since theres no border) without worrying of empty space appearing around your picture

I figured the border problem out, now that I think about it.. it wasn't that hard.
As for the buttons I mean the buttons on the Character screen image his got in his attachments.

Ah well, doesn't matter. I'm going to be editing all the GUI soon anyway. :)

[SpiceyWolf]

OH the create a character and all that? yea ud have to make a new gui code for that and make it a button rather then a lable >.>

[tsuki]

@Connor:

> Alright, I'll post once I've done it all again.
> Oh, and how do you make the buttons on the image work?
>
> Sorry for all the questions, but yeah. Haven't done any GUI based stuff before.

No problem, man  :cheesy: I like to help people

for transform the attached image just delete the caption of the "Accept" (lblCAccept) and resize it to the button on the image and move to the right alignement.
Like this:
[](http://www.freemmorpgmaker.com/files/imagehost/#b36c93101218091ef4b33b2fde9dd415.jpg)
[](http://www.freemmorpgmaker.com/files/imagehost/#4a83b7c4170b1891010f14d796be4252.jpg)
(it works with all buttons)

To make it more easy, go to Backstyle and set **1 - Opaque** to see the alignement on the game, when the buttons are in the correct position go back to Backstyle and set **0 - Transparent** again
[](http://www.freemmorpgmaker.com/files/imagehost/#139b8ff9a98c821c5952e2c7dfc144a7.jpg)

[tsuki]

@SpiceyWolf:

> OH the create a character and all that? yea ud have to make a new gui code for that and make it a button rather then a lable >.>

The code are just needed for the effect buttons.
For the people who wants a simlple graphic button, just create a background image (as the attached one) and align a label without caption. it works perfectly  ;)

[beckymegan]

Hey guys, I'm not exactly a noob but I know I'm missing something probably basic ;P How do you change the description from warrior to magician and ho do you change the picture from something small to a 96x96 image. Thanks guys!

[tsuki]

@beckymegan:

> Hey guys, I'm not exactly a noob but I know I'm missing something probably basic ;P How do you change the description from warrior to magician and ho do you change the picture from something small to a 96x96 image. Thanks guys!

> The \data files\graphics\picdesc\ is the the directory of the description picture.
> The frmMenu.picDesc is the frame name
>
> OBS: In case of you use same sprite for different classes, do a copy of the sprite, because the displayed picture's number will be equal with the selected sprite's number.

Read again all the tutorial.
The description of the class is part of an image (like the attached one)
The number of the image displayed is equal with the sprite selected
you should create a image for each sprite. In case of a same sprite for two different classes, do a copy of the sprite file and change the description of the picture and remember to rename with the same name of the sprite file.
To a different size, just change the picDesc size and image size.  ;)

I know it's not dynamic, but works perfectly, its simple and to me is very useful  :embarrassed:

[SpiceyWolf]

OPS i was wrong on that… if u seen the post ignore it im stupid >.>

[Kemerd]

A nice contribution to the community. Well done.

~ Kemerd

[tsuki]

@Kemerd:

> A nice contribution to the community. Well done.
>
> ~ Kemerd

Very thanks, Kemerd  :cheesy:

[aaaron]

Look's good. Work's alright.. ; ]