Monday, May 25, 2009

Copyrighter v0.5 - Texturing and roundedborders added!

by Hasan Karagülmez
Another big update, texturing support has been added!

copyrighter v0.5 heartstexture and roundedborders

That's Copyrighter v0.5, with a new roundedborder around the image, a textured border next to that, and another normal border as the outer border. All borders can be textured!

You can download v0.5 by clicking HERE (352kB zip-file).

The executable itself is only 88.5kB in size, and starts up instantly.

Included in the zip are:

  • all the textures used in the samples below
  • an HTML-page, containing a list of all the available colours
  • a text-file, containing a concise explanation of all available borders
  • a sample preview image (which you can change yourself if you want), sample modifydescriptor.xml file and sample copyright-image.

Functionally, it's the same as all previous versions.

Basically, just drag-and-drop images onto the main Copyrighter-window, the result is outputted in a subdirectory called "Processed".

So... what are textures?
For those who don't know, textures are (usually) small files containing a certain pattern. These patterns often seamlessly fit next to each other. This makes it ideal for use in games (say, an entire wall can be textured using only a single small image repeated many times), but it also means we can use it to texture borders in Copyrighter :)

Where do I find textures?
Textures can often be found for free, e.g.:

And many many more!

This blogpost has a link to twelve other sites containing free textures:

The heart texture used above is from this page:

Just Google for "Free textures" if you want to search for other sites. You're of course also free to create your own texture :)

It's best not to use huge textures, normally something with an width and/or height of 75 pixels is just fine.

How do I use them?
In order for textures to be used, I've defined some new XML-attributes with which you can designate what to use and how the texture should behave.

For example, the solidcolourborder only had the colour attribute, which you could use as e.g. colour="pink".

Well, now you can also use "texture", "texturemode" and "texturescale". The texturemode and texturescale are optional, but texture is required.

For example, the sample Copyrighter v0.5 screenshot used this XML:

<?xml version="1.0" encoding="UTF-8"?>
<modify type="solidcolourborder" colour="pink" width="10" />
<modify type="solidcolourborder" width="60" texturescale="1.0" texturemode="default" texture="hearttexture.jpg" />
<modify type="roundedborder" colour="pink" width="8" />
<modify type="image" opacity="1.0" />
<modify type="copyrightimage" opacity="0.5" position="bottomright" percentage="50" filename="example.png" />

Important: Place any texture you've got in the same folder as the Copyrighterer.exe folder, this ensures it can be found.

Here's an example with texturescale set to 0.5, as you can see, the texture is smaller and more textures are used to fill up the rectangle:

copyrighter v0.5 heartstexture at texturescale 0.5

And here's an example with texturescale set to 2.0, the texture is now twice as big:

copyrighter v0.5 heartstexture at texturescale 2.0

So, basically, with texture you set the filename of the texture. With texturescale you can set the size of the texture and with texturemode you can set how the texture should behave.

This is because there are a couple of options, the default behaviour is that the texture is copied to the left and to the bottom untill the entire rectangle is filled with the texture.

Another important texturemode is scaletofit. This, as the name suggests, scales one texture so that ONE texture fills the ENTIRE rectangle. This can be used for if, for example, you've got a texture which is in fact a gradient.

So, another sample using a gradient image would be:

<?xml version="1.0" encoding="UTF-8"?>
<modify type="solidcolourborder" colour="black" width="10" />
<modify type="solidcolourborder" width="62" texturemode="scaletofit" texture="blacktowhitegradient.jpg" />
<modify type="solidcolourborder" colour="black" width="2" />
<modify type="image" opacity="1.0" />
<modify type="copyrightimage" opacity="0.5" position="bottomright" percentage="25" filename="example.png" />

which gives the following result:

copyrighter v0.5 gradient scaletofit

Transparent Textures
Transparent textures are supported, e.g. here's an border using a hearts-texture, and over it another transparent border. You can accomplish this by setting the width of the underlying border to 0 (zero).
Remember, that if you want to create a transparent border, you should use a file-type which supports transparency, e.g. PNG.

<?xml version="1.0" encoding="UTF-8"?>
<modify type="solidcolourborder" colour="black" width="3" />
<modify type="solidcolourborder" width="0" texture="hearttexture.jpg" />
<modify type="solidcolourborder" width="62" texturemode="scaletofit" texture="blackgradient.png" />
<modify type="solidcolourborder" colour="black" width="2" />
<modify type="image" opacity="1.0" />
<modify type="copyrightimage" opacity="0.5" position="bottomright" percentage="25" filename="example.png" />

Which gives the following result:

copyrighter v0.5 overlayed transparent gradient border

Overlaying a texture which contains transparency, is, however, not fully supported IF the underlying border is a colour. The previous sample works, because hearttexture.jpg is underneath the blackgradient.png border.

Roundedborder texturing
Because the roundedborder basically consists of two borders (the foreground and background), you can texture them both. This is a pretty specific case, though, as only a little bit of the background will be shown, but if that's what you want to do then you can :)

Here's a closeup of the edge of a roundedborder, untextured, set with a foreground- and backgroundcolour which has the following close-up result:

copyrighter v0.5 roundedborder blue blackground green

The green colour is the background, the blue colour is the roundedborder itself.
The foreground of the roundedborder is textured via the usual texture, texturemode and texturescale attributes.

The background can be texturesset with backgroundtexture, backgroundtexturemode and backgroundtexturescale attributes. Of course, you can just specify a colour for the background with "backgroundcolour" :)

Here's a sample, which is actually the content of the modifydescriptor.xml file containted in the zip, of an untextured roundedborder. Note that the background is explicitly stated as black, the same as the surrounding solidcolourborder:

<?xml version="1.0" encoding="UTF-8"?>
<modify type="solidcolourborder" percentage="6" colour="black" />
<modify type="roundedborder" width="10" colour="white" background="black" />
<modify type="image" opacity="1.0" />
<modify type="copyrightimage" opacity="0.5" filename="example.png" percentage="25" position="bottomright" />

which gives the following result:

Copyrighter v0.5 mainimage

Final Words
So, to sum it up, there's a new border you can use called roundedborder.

Texturing for each border is done with the attributes texture (required), and the optional texturemode and texturescale attributes.

So basically that's it!

If you want to more extensive information, please check back to the blogpost about v0.3 and v0.4. A text-file with simple explanations is included in the zip-file. Of course, if you've got any questions or need help with textures or whatever, just let me know :)

Known issues
  • Textures with transparency ARE supported, but might not always be rendered correctly. Transparent textures work best if the underlying border are also textured.
  • Supplying a texture AND a colour for a border is not supported, although you're free to try it out :)

If you encounter any problems, as always, feel free to contact me :)