tsuki Posted July 19, 2011 Author Share Posted July 19, 2011 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/pics/f4d137879f5a17c39fe761e810c15cc2.png)](http://www.freemmorpgmaker.com/files/imagehost/#f4d137879f5a17c39fe761e810c15cc2.png)**After modification:**[![](http://www.freemmorpgmaker.com/files/imagehost/pics/1d509bc7afedea0bb174aa2bd86400ed.png)](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/pics/b8be7f3b7dd1596805372f730628f0e4.jpg)](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 directoryThe **\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. Link to comment Share on other sites More sharing options...
erkro1 Posted July 19, 2011 Share Posted July 19, 2011 Nice tutorial and very well explained ;) Link to comment Share on other sites More sharing options...
tsuki Posted July 19, 2011 Author Share Posted July 19, 2011 @Erwin:> Nice tutorial and very well explained ;)Thanks Erwin :cheesy: Link to comment Share on other sites More sharing options...
SpiceyWolf Posted July 20, 2011 Share Posted July 20, 2011 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 Link to comment Share on other sites More sharing options...
tsuki Posted July 20, 2011 Author Share Posted July 20, 2011 @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 DxIt means you liked my tutorial? :P Link to comment Share on other sites More sharing options...
Savents Posted July 20, 2011 Share Posted July 20, 2011 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. Link to comment Share on other sites More sharing options...
tsuki Posted July 20, 2011 Author Share Posted July 20, 2011 @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. Link to comment Share on other sites More sharing options...
Connor Posted July 20, 2011 Share Posted July 20, 2011 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\. :) Link to comment Share on other sites More sharing options...
tsuki Posted July 20, 2011 Author Share Posted July 20, 2011 @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 ;) Link to comment Share on other sites More sharing options...
Connor Posted July 20, 2011 Share Posted July 20, 2011 @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 Link to comment Share on other sites More sharing options...
RyokuHasu Posted July 20, 2011 Share Posted July 20, 2011 On the properties pannel there is a thing labeled "DorderStyle" set that to None Link to comment Share on other sites More sharing options...
tsuki Posted July 20, 2011 Author Share Posted July 20, 2011 @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/pics/b8be7f3b7dd1596805372f730628f0e4.jpg)](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 Link to comment Share on other sites More sharing options...
Connor Posted July 20, 2011 Share Posted July 20, 2011 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. Link to comment Share on other sites More sharing options...
SpiceyWolf Posted July 20, 2011 Share Posted July 20, 2011 @Jimmy:> It means you liked my tutorial? :POH YES I DO VERY MUCH*big hugz* :PCRAP how do i delete this? i dont wanna be in trouble for double post Dx Link to comment Share on other sites More sharing options...
SpiceyWolf Posted July 20, 2011 Share Posted July 20, 2011 @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 topHope i helped :PErm 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 Link to comment Share on other sites More sharing options...
Connor Posted July 20, 2011 Share Posted July 20, 2011 @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 pictureI 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. :) Link to comment Share on other sites More sharing options...
SpiceyWolf Posted July 20, 2011 Share Posted July 20, 2011 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 >.> Link to comment Share on other sites More sharing options...
tsuki Posted July 21, 2011 Author Share Posted July 21, 2011 @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 peoplefor 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/pics/b36c93101218091ef4b33b2fde9dd415.jpg)](http://www.freemmorpgmaker.com/files/imagehost/#b36c93101218091ef4b33b2fde9dd415.jpg)[![](http://www.freemmorpgmaker.com/files/imagehost/pics/4a83b7c4170b1891010f14d796be4252.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/pics/139b8ff9a98c821c5952e2c7dfc144a7.jpg)](http://www.freemmorpgmaker.com/files/imagehost/#139b8ff9a98c821c5952e2c7dfc144a7.jpg) Link to comment Share on other sites More sharing options...
tsuki Posted July 21, 2011 Author Share Posted July 21, 2011 @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 ;) Link to comment Share on other sites More sharing options...
beckymegan Posted July 21, 2011 Share Posted July 21, 2011 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! Link to comment Share on other sites More sharing options...
tsuki Posted July 21, 2011 Author Share Posted July 21, 2011 @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 selectedyou 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: Link to comment Share on other sites More sharing options...
SpiceyWolf Posted July 21, 2011 Share Posted July 21, 2011 OPS i was wrong on that… if u seen the post ignore it im stupid >.> Link to comment Share on other sites More sharing options...
Kemerd Posted July 21, 2011 Share Posted July 21, 2011 A nice contribution to the community. Well done.~ Kemerd Link to comment Share on other sites More sharing options...
tsuki Posted July 21, 2011 Author Share Posted July 21, 2011 @Kemerd:> A nice contribution to the community. Well done.> > ~ KemerdVery thanks, Kemerd :cheesy: Link to comment Share on other sites More sharing options...
aaaron Posted July 24, 2011 Share Posted July 24, 2011 Look's good. Work's alright.. ; ] Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now