[Tool] Text Image

Game Development
1

Here’s a way to put nice titles into your game without having to make and host individual image files.

Put this:

*image http://herbaloutfitters.com/textimage/text_image.php?text=[sometext]&font=georgia.ttf&fontsize=40&color=000000&matte=ffffff&shadow=inv

in your choicescript code to insert a gif image with whatever text you want, in whatever font you want, at whatever size and color. Just replace the parameters to customize.

If you need spaces in your text, put %20 instead. Example:

*image http://herbaloutfitters.com/textimage/text_image.php?text=some%20text%20with%20spaces&font=georgia.ttf&fontsize=40&color=000000&matte=ffffff&shadow=inv

Complete list of parameters:

  • text: The text to put in the image. Put %20 instead of spaces.
  • font: Font to use.
  • fontsize: The size of the font to use
  • color: Color for the text in hex format: 000000 to FFFFFF, or “rnd” (without quotes) for a random color
  • bgcolor: Background color. Optional. Defaults to transparent.
  • matte: Matte color (set this to the color of the background the image will be on top of)
  • shadow: Optional. If present, the text will have a shadow of this color. Put “inv” (without quotes) for inverse of color.

Here’s the list of fonts you can use: Andale_Mono.ttf, andalemo.ttf, arialbd.ttf, arialbi.ttf, Arial_Black.ttf, Arial_Bold_Italic.ttf, Arial_Bold.ttf, Arial_Italic.ttf, ariali.ttf, arial.ttf, Arial.ttf, ariblk.ttf, comicbd.ttf, Comic_Sans_MS_Bold.ttf, Comic_Sans_MS.ttf, comic.ttf, courbd.ttf, courbi.ttf, Courier_New_Bold_Italic.ttf, Courier_New_Bold.ttf, Courier_New_Italic.ttf, Courier_New.ttf, couri.ttf, cour.ttf, Georgia_Bold_Italic.ttf, Georgia_Bold.ttf, georgiab.ttf, Georgia_Italic.ttf, georgiai.ttf, georgia.ttf, Georgia.ttf, georgiaz.ttf, impact.ttf, Impact.ttf, timesbd.ttf, timesbi.ttf, timesi.ttf, Times_New_Roman_Bold_Italic.ttf, Times_New_Roman_Bold.ttf, Times_New_Roman_Italic.ttf, Times_New_Roman.ttf, times.ttf, trebucbd.ttf,
trebucbi.ttf, Trebuchet_MS_Bold_Italic.ttf, Trebuchet_MS_Bold.ttf,
Trebuchet_MS_Italic.ttf, Trebuchet_MS.ttf, trebucit.ttf, trebuc.ttf,
Verdana_Bold_Italic.ttf, Verdana_Bold.ttf, verdanab.ttf, Verdana_Italic.ttf,
verdanai.ttf, verdana.ttf, Verdana.ttf, verdanaz.ttf, webdings.ttf, AguafinaScript-Regular.ttf, Bilbo-Regular.ttf, Bilbo Swash Caps.ttf, Bryana Aningsih Shara.ttf, DorisDay.otf, Engagement-Regular.ttf, Gondola SD - Swash.ttf, Gondola SD.ttf, Honey Script Light.ttf, Honey Script SemiBold.ttf, MervaleScript-Regular.ttf, Montez-Regular.ttf, Norican-Regular.ttf, Sail-Regular.ttf, Tangerine_Bold.ttf, Tangerine_Regular.ttf, Yesteryear-Regular.ttf

If there are spaces in the above font names, replace them with %20 too.

I can add any font you want, but I’d like to only add fonts that are free for commercial use.

Let me know if you use this in your game, and have fun!

8 Likes
2

Very nice (I’d kill to see the php scripting behind that, lol), but wouldn’t that be a sight more complex than going to a site like cooltext.com and making an image there, rather than filling in variables for php to parse and generate?

EDIT: Nontheless, that’s some impressive code, oh also, would you need a width px by height px to be there so that the image doesn’t generate at a minuscule size? Or am I overthinking it?

3

Cooltext.com is, well, cool. :wink: Didn’t know about it before, and you could use that too if you have a place to upload the image to where your game can get to it. My text_image.php doesn’t need that, so if you just want to throw in some text gifs real quick, you can.

I made text_image.php a few years ago for playbyweb.com for generating dynamic text gifs on the fly. You can’t do that in choicescript without modifying it so that ${var} variables get parsed in the *image command, but if you modified it to be like that, you could put in text that changes depending on what happens in the game.

No height and width is needed because the code figures that out by itself. Here’s the code:

[code]

<?php /** * text_image.php: Requires: .ttf files in same directory Accepts the following GET parameters: * * text: The text to put in the image * fontdir: Directory .ttf font file is located. Optional. Defaults to current directory. * font: Font to use. Optional. Do not put .ttf extension, but I believe it must be lower-case (i.e. .ttf not .TTF). * fontsize: The size of the font to use * color: Color for the text in hex format: 000000 to FFFFFF, or "rnd" (without quotes) for a random color * bgcolor: Background color. Optional. Defaults to transparent. * matte: Matte color for transparency (this is the color of the background the image will be on top of) * shadow: Optional. If present, the text will have a shadow of this color. Put "inv" (without quotes) for inverse of color. * * Examples of usage: * * text_image.php?fontsize=30&text=Your%20Games&color=ffffff&fontdir=themes/unicorn1/&font=charmed&bgcolor=888888&shadow=inv * */ header("Content-type: image/gif"); header ("Last-Modified: " . gmdate("D, d M Y H:i:s",mktime (0,0,0,1,1,2000)) . " GMT"); // Date in the past header ("Expires: Mon, 26 Jul 2040 05:00:00 GMT"); // In other words... never expire the image header ("Cache-Control: max-age=10000000, s-maxage=1000000, proxy-revalidate, must-revalidate");//Cache-Control header is ESSENTIAL for forcing Netscape to load all images!... and telling the ISP caches to do the same in this case cache for 1 million seconds. // Set parameters. Change default values here too. $text = ($_GET['text']) ? $_GET['text'] : 'Put parameters in url: text, font, fontsize, color, bgcolor, matte'; if($_GET['font']) $font = $_GET['font']; else $font = 'Ogilvie'; // Default font if($_GET['fontsize']) $fontsize = $_GET['fontsize']; else $fontsize = 11; $color = ($_GET['color']) ? $_GET['color'] : 'FFFFFF'; $matte = ($_GET['matte']) ? $_GET['matte'] : '000000'; $fontdir = ($_GET['fontdir']) ? $_GET['fontdir'] : '.'; if($_GET['shadow']) $shadow = $_GET['shadow']; if($color=='rnd') $color = random_hex_color(); if($shadow=='inv') $shadow = inverseHex($color); // Set the enviroment variable for GD putenv('GDFONTPATH=' . realpath($fontdir)); $size = imagettfbbox($fontsize, 0, $font, $text); $width = $size[2] + $size[0] + 8; $height = abs($size[1]) + abs($size[7]); $im = imagecreate($width, $height); if($_GET['bgcolor']) $colorBg = ImageColorAllocateFromHex($im, $_GET['bgcolor']); else { $colorMatte = ImageColorAllocateFromHex($im, $matte); imagecolortransparent($im, $colorMatte); } // Add some shadow to the text if($shadow) { $colorShadow = ImageColorAllocateFromHex($im, $shadow); if($fontsize < 50) $offset = 1; else if($fontsize > 100) $offset = 3; else $offset = 2; //In-between imagettftext($im, $fontsize, 0, $offset, abs($size[5])+$offset, $colorShadow, $font, $text); } // Add the text $color = ImageColorAllocateFromHex($im, $color); imagettftext($im, $fontsize, 0, 0, abs($size[5]), $color, $font, $text); imagegif($im); imagedestroy($im); function random_hex_color(){ return sprintf("%02X%02X%02X", mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); } /** * Inverses a provided hex color. * @param string $color hex color to transforms * @return string Reversed hex color of input hext color */ function inverseHex( $color = NULL ){ $color = str_replace( "#", "", trim( $color ) ); $len = strlen( $color ); if( $len < 3 || $len > 6 ) { trigger_error( "Invalid hex color", E_USER_ERROR ); } if( $len == 3 ) { $color = preg_replace( "/(.)(.)(.)/", "\\1\\1\\2\\2\\3\\3", $color ); } $r = dechex( 255 - hexdec( substr( $color, 0, 2 ) ) ); $r = ( strlen( $r ) > 1 ) ? $r : '0' . $r; $g = dechex( 255 - hexdec( substr( $color, 2, 2 ) ) ); $g = ( strlen( $g ) > 1 ) ? $g : '0' . $g; $b = dechex( 255 - hexdec( substr( $color, 4, 2 ) ) ); $b = ( strlen( $b ) > 1 ) ? $b : '0' . $b; return $r . $g . $b; } /** * Same as image_color_allocate() except accepts an HTML hex string color * (e.g. 000000 for black to FFFFFF for white) instead of the three numbers. **/ function ImageColorAllocateFromHex ($img, $hexstr) { $int = hexdec($hexstr); return ImageColorAllocate ($img, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int); } ?> [/code]

Also fun would be to make this code able to put a background image. I think you can also use php to combine images, so you could probably put a figure on a map, reveal sections of the map, change the colors of parts of the image, and basically dynamically generate different images.

For example, I remember a review of Choice of the Dragon where someone wanted there to be in image of the dragon that would change depending on what happened in the game, like if you chose its color or something. Well, that could be done by just having a different image file for each color, but if there were a lot of traits, the number of combinations could grow large. With a php image, you could just generate them.

2 Likes
4

(Reads part about map and dynamic php imaging).

…I like where you’re going with this.

5

Question, seeing as we’d be dynamically creating a .gif image would we be able to add additional frame information and transitions (obviously not with the code the way it is right now, since it wasn’t optimized for that, but in theory?) Also, would we be able to create a variables in CS and add those into the link in the *image command? Because if so, we might be able to finally have a passable combat system right in CS using .gif animations generated by the code without having to make hundreds of different solid images, only image effects and sprites to be used in combination (merging images as described in this stackoverflow thread).

6

I’m assuming this wouldn’t work if someone was playing offline?

7

@Malebranche, creating an animated gif is possible in php but not with the gd library, which is what textimage uses. I think what you’re describing is possible, however. Not the variables, though, unless you modify the cs interpreter.

@CJW, I think it will work if the images are in their cache, but I’m glad I posted this, cuz your and Malebranche’s feedback shows the limitations of this tool. I’ve realized it should only be for convenience sake in non-commercial games, not used for games to be published unless requiring being online is okay.

8

None of the images that appear in Unnatural are linked to any websites, you just stick any image you want into the mygame folder and then *image image_name and it appears. So I’m not sure why you think the image has to be hosted somewhere?

9

Yes, @Nocturnal_Stillness, what you describe is the normal way of putting in images, but then they have to be regular, static images. This tool of mine opens up the possibility of dynamically generated images.

Also, it allows putting in a text image by just typing in the text in your code, saving the time it takes to create and upload the image.

10

Well, dare I say it, but it might not be a bad idea to include this as a mod that you can integrate into CS. Though it may be a severe pain in the arse to work around the pre-existing CS distro, it would probably work best if installed within CS itself, not having to rely on exterior hosting. It could be suggested to COG as an update to CS, or rather, have a game make use of the mod, and then send it to COG for packaging. There’s a good chance they might integrate it, I know that for Trials Of the Demon Hunter they added in sound support (and even an experimental *sound command) in the packaged versions of the game and newer versions of CS.

EDIT: @Nocturnal_Stillness any and every kind of file is hosted somewhere, since your computer is basically an un-memory-optimized server without its own static IP address. Heck, even Dropbox is a hosting service, just a sight more limited than places like hostgator, godaddy, etc. As the OP explained, normally you’d have only static images that don’t change based on variable, however by using a php code (in this case hosted on the OP’s server, or, if you prefer, might one day be able to install directly into your CS folder on your computer (or mini-server)) you can dynamically send parameters to the php doc which will then immediately act upon your parameters and bring back a dynamic (chaotic, or liable-to-change-based-on-parameters-given) image.

11

But say someone bought the game in an app store. Then it’d be installed on their device, and ideally, they should be able to play it offline without missing images showing up.

Unfortunately, I don’t think it’s possible to integrate this into the existing CS distro because it relies on php. I guess if someone did it with html5 and javascript, it could be done, but that doesn’t seem realistic unless CoG gets a team of fulltime programmers or something.

12

*if (mc = “Malebranche”)
*image malebranche.jpg
*if (mc = “Nocturnal_Stillness”)
*image nocturnal.jpg

That would achieve the same thing. I guess I’m just missing something unless you mean to change parts of the same photo I.e being able to remove a character from a team photo if they die?

About hosting I mean it doesn’t have to be hosted on another site just put into the mygame folder.

13

Exactly that, theoretically by overlaying several images via php and removing or adding effects and appearances. If we could create variables in CS that represent these images and effects in the *image command we’d (hypothetically) have ourselves a ball with the possibilities. That way, instead of having to constantly change the information in each *image command you could simply *set a value for a variable within the line of the *image command in CS and have it change.

14

Sorry it took so long to ask this (perhaps it’s just my inexperience talking) but why wouldn’t you be able to implement it into a CS Distro as a mod? Hell, if anything I think you’ve already proven it to work with modification to the .index files. Allow me to explain: in your original post you gave an example of the *image command fetching an image from an outer server (in this case, yours) and you have even showed it to work with a .php link, though one might think that the *image command only accepts .jpg in its command line, it clearly is not limited to this assuming you tested that it’d work (and I’m quite sure you did seeing as you posted it here as a Tool). Accepting this logic, why not include the .php file and .ttf files into your mygame folder (or make another folder solely for that if you wish, since we have previously proven that the *image command is not only limited to the confines of the CS distro and your computer) and now you can have dynamic images in your CS game, that won’t fail even without an internet connection (providing the user downloaded the packaged app onto their device). With a little finagling in CS’s command translator files (and a few modifications to the .php file), it should be no problem to create variables in CS that can be inserted into the *image command line and change simply by using the *set command in CS.

Am I wrong?

15

Well, if nothing else, PHP isn’t installed/can’t be run on most consumer Desktops.

16

OK, that explains a lot, and running everything in a Virtual Machine would be a pain to arrange. Seeing as Javascript is (mostly) client-side, could (theoretically) something be created along the same lines in Javascript without delving into node and the like?

EDIT: Found a possible resource that may or may not work to create images [here][1]. If reapplied in our case scenario for images, half of the figuring out might already be done.
EDIT 2: Additional resources for adding height width and implementation: http://stackoverflow.com/questions/12485600/how-to-make-images-appear-in-javascript

FINAL EDIT (I promise :wink: ): I’m beginning to see that simply creating things image by image and merging them in paint and the like would be less tedious. The sheer amount of coding it would take outside of php is starting to look quite ridiculous. It’s more simple to upload a ready made image to the mygame folder, rather than try to make an image creation software that already exist elsewhere. It can be done and integrated, but (as someone most likely mentioned beforehand) best believe it’ll be a hassle, not to mention the added (possibly unnecessary) file size.
[1]: http://www.dreamincode.net/forums/topic/279385-how-to-create-text-file-using-javascript/

17

Okay, I might be a little bit of topic here, but not too much I hope.
I have an image I want to display named *image Naamloos.png
Placed it in the mygame folder and it shows up just fine if I test it.

But how do I get it to show up in a compiled version?

18

Quicktest and Randomtest are having problems with the command, it tells me that the file doesn’t exist.

19

Can’t you just ignore that message? Or do the tests abort?

20

@Flurrywinde11 Automated testing aborts at failures.

@Elite Just use *if choice_randomtest to (or probably not(randomtest) to make things easier) to bypass the lines, Or my personal recommendation, just go and actually generate the images and save them from the start. :stuck_out_tongue:

1 Like