Jump to content
Sign in to follow this  
Shu

Creating New Themes

Recommended Posts

Since release of the new theme support, I've added a couple of options to create themes in a way that doesn't require copying of entire default theme and redoing stuff inside it.
Also doing this way is a safe way - themes are less likely to break or be unsupported after each update.

You can use either way, but it's highly recommended that you do it as I showed in the demo theme below.

Image used for the demo:
http://i.imgur.com/ixd9z8f.png

Entire theme demo code including explanations:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE themes PUBLIC "-//www.matthiasmann.de//TWL-Theme//EN" "http://hg.l33tlabs.org/twl/raw-file/tip/src/de/matthiasmann/twl/theme/theme.dtd">
<themes>
	<!-- First we need to load the default theme -->
	<include filename="../default/theme.xml"/>
	
	<!-- 
	How does it work?
	
	Basically you have an option to override already existing theme blocks.
	You do not need to copy entire block, just the base block i.e.
	<theme name="some-block">
		// Params you want to edit
	</theme>
	
	This allows you to edit single portions of theme rather than having to replace entire theme or block, allowing an option to skin gui piece by piece.
	This also makes your themes have less of redundant code and be more compatibile with each update.
	It's highly recommended that you do not copy - paste entire theme blocks because it might be less compatibile with any future updates.
	
	Currently it's not possible to replace already existing image, unless you will redefine each block using it, but you can easily import new images and replace theme blocks that are using it.
	-->
	
	
	<images file="res/test.png" format="COLOR">
        <grid name="test-frame.background" weightsX="0,1,0" weightsY="0,0,1,0">
            <area xywh="5,3,8,2"/>
            <area xywh="36,3,8,2"/>
            <area xywh="134,3,8,2"/>
		    <area xywh="5,5,8,22"/>
            <area xywh="36,5,8,22"/>
            <area xywh="134,5,8,22"/>
            <area xywh="5,37,8,14"/>
            <area xywh="33,37,8,14"/>
            <area xywh="134,37,8,14"/>
            <area xywh="5,67,8,14"/>
            <area xywh="27,67,8,14"/>
            <area xywh="134,67,8,14"/>
        </grid>
        
    </images>

	<!--
	
	-->

	
	<!-- 
	In this example only button image would be replaced.
	Everything else would remain the same, text aligment, borders and font.
	-->
	<theme name="button">
		<param name=""><image>button-tiny-green.*</image></param>
	</theme>
	
	<!--
	Let's say you want to change general frame background and title font.
	Most of the windows in the game reference the resizableframe theme, so easiest way of doing it 
	would be modifying part of resizableframe responsible for background and title font.
	
	All remaining params that are not defined here are used from the default theme.
	-->
	
	<theme name="resizableframe" allowWildcard="true">
		<!-- Replace the background -->
		<param name="background"><image>test-frame.background</image></param>
		
		<!-- 
		Since in this example I've used graphic that uses different layout than default, 
		I need to fix the vertical position of the title bar.
		-->
		<param name="titleAreaTop"><int>3</int></param>
		<param name="titleAreaBottom"><int>18</int></param>
		
		<!-- Fixing the close button position as well -->
		<param name="closeButtonY"><int>5</int></param>
		
		<theme name="title" ref="label">
			<!-- Replace title font -->
			<param name="font"><font>dejavu-bold-bevel</font></param>
        	</theme>
	</theme>
	
	<!--
	More complex example including children themes.
	So let's say you want to replace the item slot bar in hotkey when it's unlocked ( bag opened ).
	
	Theme responsible for it is hotkeybar-visible, in it's children themes there is item-slot section resposible for the slot theme:
	hotkeybar-visible -> content -> item-slot
	To just replace the image you don't need to include entire theme-block, you can only re-create the hierarchy tree and replace the parameters you want.

	Example here replaces the background image, font and borders.
	-->
	<theme name="hotkeybar-visible" ref="resizableframe">
		<theme name="content" ref="-defaults">
			<theme name="item-slot" ref="-defaults">
				<param name="background"><image>chat-bubble.background</image></param>
				<param name="font"><font>pb-dark</font></param>
				<param name="border"><border>24,0,5,0</border></param>
			</theme>
		</theme>
	</theme>
</themes>

It's also worth noting that you can selectively replace the images used in /default/textures folder simply by copying them to your theme and editing in image editing software. You do NOT need to copy ALL of them, just ones you want to replace/change.

I'm not locking this topic, so if you have any questions regarding creating themes I'll try to answer them when I can.

Share this post


Link to post

So I am trying to change those fields [spoiler]tF1ubno.png[/spoiler]
Code:
[spoiler] 

	<theme name="monster-frame" ref="resizableframe">
		<param name="background"><image>frame_bc</image></param>
		<param name="overlay"><image>odlesk</image></param>
		<theme name="title" ref="-defaults">
			<!-- titulek -->
			<param name="textAlignment">
				<enum type="alignment">center</enum>
			</param>
			<param name="font"><font>monster_title</font></param>
		</theme>
		<!-- zase titulek -->
		<param name="titleAreaTop"><int>12</int></param>
		<param name="titleAreaLeft"><int>11</int></param>
		<param name="titleAreaRight"><int>270</int></param>
		<param name="titleAreaBottom"><int>45</int></param>
		
		<theme name="dialoglayout" ref="-defaults">
			<theme name="tabbedpane" ref="-defaults">
				<theme name="container" ref="-defaults">
					 <theme name="dialoglayout" ref="-defaults">
						<theme name="label-monster-area" ref="-defaults">
							<theme name="label-monster-value" ref="label" allowWildcard="true">
								<param name="background"><image>Xmi-label-value</image></param>
							</theme>
							<theme name="label-monster-value-name" ref="label" allowWildcard="true">
								<param name="background"><image>Xmi-label-value-inset</image></param>
							</theme>
						</theme>
					</theme>
				</theme>
			</theme>
		</theme>
	</theme>
[/spoiler]
But i get error "while parsing Theme XML file: ...monster-frameG.xml"
I would be very happy if anyone can help me what this.
There is whole file: http://sdrv.ms/192KKq7

Share this post


Link to post

I have question. I have experience in Skin/GUI Making for games, and if i make new one, theres any chance that skin will be implemented to the game, or everyone who want other skin need to change it manually?

Share this post


Link to post

Could this code be edited in something like Eclipse?

 

You should use Notepad++,    it's the best editor for non-java things. I'd say eclipse is just about only good for Java in my opinion

Share this post


Link to post

You should use Notepad++,    it's the best editor for non-java things. I'd say eclipse is just about only good for Java in my opinion

 

Was posted in August... AUGUST! i think he got the answer time ago.

Btw who use notepad++, only notepad for pros!

Share this post


Link to post

Hi there,

I know it's an old topic but it seems to be the only one where people can ask questions regarding theme creation. So here is mine :)

I'm trying to create a new theme based on default one. It's been going good until I tried to change a position of some elements that I can't move by any means I tried (like changing borders on different elements, setting gaps etc.). So far I had problems with:

  • Trainer card - moving icons near statistics, moving badges
  • PC - moving little help button in top right area
  • Pokemon summary - moving held item image, moving gender image

Is there some way to move these? 

Edited by slidingpanda

Share this post


Link to post

I didn't understand a error. I edited a PC-WINDOW.PNG with PHOTOSHOP and saved with PNG and there was a message <images file="res/pc=window.png">...755:38) caused by: java.io.IOException Unable to load PNG file: file:/.../PokeMMO-Client/data/themes...

 

I pick the same image but edited on PAINT and the error disappears, why?

Share this post


Link to post

I didn't understand a error. I edited a PC-WINDOW.PNG with PHOTOSHOP and saved with PNG and there was a message <images file="res/pc=window.png">...755:38) caused by: java.io.IOException Unable to load PNG file: file:/.../PokeMMO-Client/data/themes...

 

I pick the same image but edited on PAINT and the error disappears, why?

Did you save the PNG using interlacing? If you did then that is the cause of the issue.

Share this post


Link to post

I check to create a Theme and GUI, and i wonder if there is any way to change the battle screen size for something more bigger ?

Share this post


Link to post

I check to create a Theme and GUI, and i wonder if there is any way to change the battle screen size for something more bigger ?

No there is not.

Share this post


Link to post
Posted (edited)

Anyone have any idea how to change fonts colour? Anyways i already started to messing with the fonts xml to figure it out 

Edited by budadeth

Share this post


Link to post

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.