Dynamically Generated images?

ilrak · #1 03-16-2015, 04:17 PM

I learned that some sites use this for pet images (and that it can be useful for markings, colors, etc). How would one go about coding this with mysidia? I found a couple of php tutorials but I don't know if they would still work with this script or not. If so, this might make things a lot easier on me just for the pet images (instead of creating about 755 separate breeds, just for Common goldfish alone!)

***Kyttias*** · #2 03-16-2015, 07:51 PM

There are a couple of ways it could be done. Lioden stacks ordinary images on top of one another, Flight Rising saves a bunch of images with the pet's ID (I think), HTML5 Canvas could be an option, but dynamically generating an image from merged layers with a meta header declaring a php script as an image should also work -- I'm just not sure how I feel about the load time of this. If you don't save the "image", merely load it every time for each adopt on the page, then it's like Flight Rising but without the script storing the image afterward.

No matter which route you go you'll want to plan a folder structure ahead of time and add these attributes for your fish into the database as columns (in the table for owned adoptables). You'll want to make a new method inside of the ownedadoptables class, I named mine getLayers(). Look through the whole class and you'll find the method that's being used to call up the images in the site - find every instance where it's being called inside the framework and call your method that'll place in a generated image instead. I won't give you hints on that, though. It's very easy to call up the variables once they exist in your database!

I simply made a column called "p_color" to hold my primary colors, its a SMALLINT, and holds simply numbers. They correspond to array that holds all my color names - and all of these color names are the name images in my folders.

So, like...

PHP Code:


			
$colors = ["red","yellow","orange"];
$p_color = $colors[$adopt->p_color];

And $adopt->p_color pulls the number from the current adoptable's p_color column and then the variable $p_color holds the name of the color in the array that corresponds with that color. Easy! You can pull from the existing columns that store breed, level, and gender information if you want. But then you'd also want to create a column for secondary colors and patterns if you want those.

You're basically just going to concatenate these variables together as a string of folders and file names. These are how your code will find the images you want to merge.

I'm already storing some custom images in an /img/ folder I created, and my creatures are called Novu, so my folder structure looks like this -

Spoiler: folder structure

Obviously you need to make a folder structure that makes sense for you needs. Genders look different, things get bigger with age, that nonsense.

Anyway, I've basically already successfully been able to imitate Lioden with its overlapping images (but not a dynamically generated single image). The concept is virtually the same, its just what you do with those variables once you have them ready to go.

I hope its understandable, though, that I don't want a bunch of sites running around with a clone of this particular technique, at least not for free. So this is about all the help I'm willing to give. But I hope I've at least managed to push you in the right direction!

ilrak · #3 08-25-2015, 10:10 AM

Thanks so much! I thought I had responded to this but I guess I didn't xD

I went over this with my new programmer last night and he has a good idea on where to start now. I do have another question though:

In my game, the colors are set up kinda like Flight rising, with a primary, secondary, and tertiary (art wise, I think I like doing that sort of thing for the markings and such rather than more slots for markings like Lioden). Would I have each type of color in it's own folder then? Like this:

Spoiler: folders

That's just for the adult forms (I am having three other stages where the colors are slowly revealed, much like actual goldfish). I'm not sure if that's what the folder structure should be though. I'm working on recoloring the art to match the folder structure a little more. I'm also wanting to add on mutations if the offspring is inbred, so would that also be in this folder structure? I'm thinking yes, but am not sure.

***Kyttias*** · #4 08-25-2015, 09:03 PM

I'd recommend something like this (just go another folder down):

Spoiler: folders

If you wanted to build a female oranda at level 5, with an obsidian stipple body (primary), copper point fins (secondary), and a chocolate dot marking (tertiary), you'd want to load just these files:

images/oranda/f/5/body/stipple/obsidian.png
images/oranda/f/5/fins/point/copper.png
images/oranda/f/5/markings/dot/chocolate.png
images/oranda/f/5/lines.png

(And really, you could just store the lines with the colored images. This would even allow you to make fins of slightly different shapes.)

I won't help, because I've done it myself and it's a trade secret at this point, but ask your programmer if you can save ONE image (for each body, fin and marking pattern), in just a base color, instead of individual colors -- that he can tint with a color hex code programatically. It's definitely possible, and then you don't have to save each color manually! Think about it, as it can even work with markings that involve more than one color (rather than saving a black and white image, you could, for example, make a yellow dot surrounded by a slightly red outline... tinting it programmatically would be to the same effect as sliding the hue in art program so it's a slightly different shade).

If you can get your programmer to tint an image programatically, you can bring it down to just:

images/oranda/f/5/body/stipple.png
images/oranda/f/5/fins/point.png
images/oranda/f/5/markings/dot.png

ilrak · #5 08-27-2015, 07:22 PM

Thank you so much! I'll show this to my programmer when ge comes over next! I'm guessing that the pets are still created in the admincp, but I'll have him look at it and see what the best way will be to create them! Thank you again so much!

***Kyttias*** · #6 08-28-2015, 03:29 AM

I've personally been thinking about creating a separate place to create pets outside the adminCP, too. x'D They're still created there in name and functionality, even though those images aren't ever seen (I'm uploading lines-only placeholders there so I have a visual). Stages of pets and what level they reach them are all still done in the adminCP.

Kesstryl · #7 08-30-2015, 11:06 PM

Thanks for this info! I'm actually making a non-Mysidia game (a strategy game, not pet related) with an avatar system and I've been trying to decide if I'm going to use the php ImageCopy or try layering images with CSS. This post is very informative.

***Kyttias*** · #8 08-30-2015, 11:37 PM

The plus side to layering images is that they'll be cached by the browser for fast loading. On the other hand, these images are relatively small in size to begin with so load times don't really matter. The down side is, they're a collection of images rather than a truly merged image and therefore cannot be saved. Merging things with GD is definitely possible, so keep looking into it! On the other-other hand, separate images means you can even layer animated gif images onto your avatars - something PHP is still incapable of doing even a decade after people first asked for such features.

parayna · #9 01-22-2016, 05:08 PM

Posting here so I can keep track of this post and not lose it again >.>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
GD images	mapleblade	Mys v1.2.x Mods	11	03-04-2012 05:39 AM
no images	RoconzaArt	Questions and Supports	1	03-13-2011 11:39 AM
More images would be nice.	RoconzaArt	Feedback and Suggestions	12	01-22-2011 11:24 PM
I cant see the images	zKaZy	Questions and Supports	11	03-28-2010 12:49 PM
Images not showing	Tequila	Questions and Supports	22	03-07-2009 08:15 AM

What's New?

What's Hot?

What's Popular?