Thrive Game Development
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Thrive Game Development

Development of the evolution game Thrive.
 
HomeHome  PortalPortal  Latest imagesLatest images  SearchSearch  RegisterRegister  Log inLog in  
Welcome new and returning members!
If you're new, read around a bit before you post: the odds are we've already covered your suggestion.
If you want to join the development team, sign up and tell us why.
ADMIN is pleased to note that this marquee has finally been updated.
ADMIN reminds you that the Devblog is REQUIRED reading.
Currently: The Microbe Stage GUI is under heavy development
Log in
Username:
Password:
Log in automatically: 
:: I forgot my password
Quick Links
Website
/r/thrive
GitHub
FAQs
Wiki
New Posts
Search
 
 

Display results as :
 
Rechercher Advanced Search
Statistics
We have 1675 registered users
The newest registered user is dejo123

Our users have posted a total of 30851 messages in 1411 subjects
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests

None

Most users ever online was 443 on Sun Mar 17, 2013 5:41 pm
Latest topics
» THIS FORUM IS NOW OBSOLETE
Thrive GUI tutorial - CEGUI from image to script! Emptyby NickTheNick Sat Sep 26, 2015 10:26 pm

» To all the people who come here looking for thrive.
Thrive GUI tutorial - CEGUI from image to script! Emptyby NickTheNick Sat Sep 26, 2015 10:22 pm

» Build Error Code::Blocks / CMake
Thrive GUI tutorial - CEGUI from image to script! Emptyby crovea Tue Jul 28, 2015 5:28 pm

» Hello! I can translate in japanese
Thrive GUI tutorial - CEGUI from image to script! Emptyby tjwhale Thu Jul 02, 2015 7:23 pm

» On Leave (Offline thread)
Thrive GUI tutorial - CEGUI from image to script! Emptyby NickTheNick Wed Jul 01, 2015 12:20 am

» Devblog #14: A Brave New Forum
Thrive GUI tutorial - CEGUI from image to script! Emptyby NickTheNick Mon Jun 29, 2015 4:49 am

» Application for Programmer
Thrive GUI tutorial - CEGUI from image to script! Emptyby crovea Fri Jun 26, 2015 11:14 am

» Re-Reapplication
Thrive GUI tutorial - CEGUI from image to script! Emptyby The Creator Thu Jun 25, 2015 10:57 pm

» Application (programming)
Thrive GUI tutorial - CEGUI from image to script! Emptyby crovea Tue Jun 23, 2015 8:00 am

» Achieving Sapience
Thrive GUI tutorial - CEGUI from image to script! Emptyby MitochondriaBox Sun Jun 21, 2015 7:03 pm

» Microbe Stage GDD
Thrive GUI tutorial - CEGUI from image to script! Emptyby tjwhale Sat Jun 20, 2015 3:44 pm

» Application for Programmer/ Theorist
Thrive GUI tutorial - CEGUI from image to script! Emptyby tjwhale Wed Jun 17, 2015 9:56 am

» Application for a 3D Modeler.
Thrive GUI tutorial - CEGUI from image to script! Emptyby Kaiju4u Wed Jun 10, 2015 11:16 am

» Presentation
Thrive GUI tutorial - CEGUI from image to script! Emptyby Othithu Tue Jun 02, 2015 10:38 am

» Application of Sorts
Thrive GUI tutorial - CEGUI from image to script! Emptyby crovea Sun May 31, 2015 5:06 pm

» want to contribute
Thrive GUI tutorial - CEGUI from image to script! Emptyby Renzope Sun May 31, 2015 12:58 pm

» Music List Thread (Post New Themes Here)
Thrive GUI tutorial - CEGUI from image to script! Emptyby Oliveriver Thu May 28, 2015 1:06 pm

» Application: English-Spanish translator
Thrive GUI tutorial - CEGUI from image to script! Emptyby Renzope Tue May 26, 2015 1:53 pm

» Want to be promoter or project manager
Thrive GUI tutorial - CEGUI from image to script! Emptyby TheBudderBros Sun May 24, 2015 9:00 pm

» A new round of Forum Revamps!
Thrive GUI tutorial - CEGUI from image to script! Emptyby Oliveriver Wed May 20, 2015 11:32 am


 

 Thrive GUI tutorial - CEGUI from image to script!

Go down 
3 posters
AuthorMessage
crovea
Programming Team lead
crovea


Posts : 310
Reputation : 59
Join date : 2013-10-07
Age : 33
Location : Denmark

Thrive GUI tutorial - CEGUI from image to script! Empty
PostSubject: Thrive GUI tutorial - CEGUI from image to script!   Thrive GUI tutorial - CEGUI from image to script! EmptyMon Oct 20, 2014 4:38 pm


Thrive GUI tutorial - CEGUI from image to anything!


Hello everyone

I wanted to create this tutorial to help share my knowledge about how to implement the parts of the GUI for thrive, and hopefully show how easy it is, even with no programming or "xml" experience!

As you may know, we use Ogre3D as our graphics library/engine and in that context there are a number of available GUI libraries that are made specifically for Ogre3D and this is where CEGUI comes in, a very flexible gui library with great modding abilities without the need to change much of any code. CEGUI uses a number of "XML" style files that define most of what makes up the GUI and this tutorial is focused on explaining how they work and how you can help add to and improve the GUI!

This tutorial does not deal with how to make the actual art of the elements of the gui. It is assumed that the art is already ready for each gui element and simply needs to be put into the game.

There are 6 stages to the gui, which can be seen in the 6 sections below. They can generally be followed in chronological order when implementing the gui!

Raw Images
Spoiler:

XML files
Spoiler:
Imagesets
Spoiler:
looknfeel

Spoiler:

schemes
Spoiler:
layouts
Spoiler:
lua

Spoiler:

And that's it! Please leave any question, corrections or comments below!


Last edited by crovea on Sat Nov 01, 2014 4:42 pm; edited 11 times in total
Back to top Go down
tjwhale
Theorist
tjwhale


Posts : 87
Reputation : 26
Join date : 2014-09-07

Thrive GUI tutorial - CEGUI from image to script! Empty
PostSubject: Re: Thrive GUI tutorial - CEGUI from image to script!   Thrive GUI tutorial - CEGUI from image to script! EmptyThu Oct 23, 2014 6:03 pm

Hi crovea, nice guide!

Can I just check one thing, in the "Image Sets" section it says

crovea wrote:

xPos

This is the pixel x-coordinate for the upper-right-most corner of the image for this element, in the raw image. On windows, you can find this by opening the raw image in paint, and mousing over the upper-right-most corner and reading the X,Y values in the bottom left of the paint window. e.g. "100".

yPos

This is the pixel y-coordinate, found as above.

width

This is the pixel-width of the element. This can be found in windows by mousing over the upper-right-most corner of the element in the raw image, and subtracting the x-coordinate from this value.

height

The pixel-height value of the element, can be found similarly to above.

I'm a little surprised that you use "upper-right-most corner" for both xpos and width. I was expecting xpos to be from the "upper-left-most corner" as surely they can't be the same?

Once you have checked this feel free to delete this post!
Back to top Go down
NickTheNick
Overall Team Co-Lead
NickTheNick


Posts : 2312
Reputation : 175
Join date : 2012-07-22
Age : 28
Location : Canada

Thrive GUI tutorial - CEGUI from image to script! Empty
PostSubject: Re: Thrive GUI tutorial - CEGUI from image to script!   Thrive GUI tutorial - CEGUI from image to script! EmptyThu Oct 23, 2014 11:39 pm

Let me know when you want this to be made an announcement and I can make it happen. Excellent work in starting this.
Back to top Go down
crovea
Programming Team lead
crovea


Posts : 310
Reputation : 59
Join date : 2013-10-07
Age : 33
Location : Denmark

Thrive GUI tutorial - CEGUI from image to script! Empty
PostSubject: Re: Thrive GUI tutorial - CEGUI from image to script!   Thrive GUI tutorial - CEGUI from image to script! EmptyFri Oct 24, 2014 10:43 am

noted both of you thanks

I'm not sure how I feel about the spoiler tags, as the whole shading thing kind of ruins the text, any thoughts?
Back to top Go down
tjwhale
Theorist
tjwhale


Posts : 87
Reputation : 26
Join date : 2014-09-07

Thrive GUI tutorial - CEGUI from image to script! Empty
PostSubject: Re: Thrive GUI tutorial - CEGUI from image to script!   Thrive GUI tutorial - CEGUI from image to script! EmptyFri Oct 24, 2014 4:35 pm

Sorry to be a stickler but there's two,

crovea wrote:
This is the pixel x-coordinate for the upper-left-most corner of the image for this element, in the raw image. On windows, you can find this by opening the raw image in paint, and mousing over the upper-right-most corner and reading the X,Y values in the bottom left of the paint window. e.g. "100".

It's perfectly readable with the spoiler tags, it would probably be fine without them.
Back to top Go down
Sponsored content





Thrive GUI tutorial - CEGUI from image to script! Empty
PostSubject: Re: Thrive GUI tutorial - CEGUI from image to script!   Thrive GUI tutorial - CEGUI from image to script! Empty

Back to top Go down
 
Thrive GUI tutorial - CEGUI from image to script!
Back to top 
Page 1 of 1
 Similar topics
-
» Official Podcast Script: What is Thrive?
» Image Filters
» Trouble with Cmake and cegui
» Miscellaneous Bugs And Questions That Don't Deserve Their Own Thread Thread
» Miscellaneous Bugs And Questions That Don't Deserve Their Own Thread Thread

Permissions in this forum:You cannot reply to topics in this forum
Thrive Game Development :: Development :: Programming-
Jump to: