Dynamically Generated images?

[Kyttias]

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 

This is just for one species - Lythine. I'm checking first what level they are, then if its a boy or a girl, I store the lines there, and the colors and patterns inside folders of their own:

img/

novu/

lythine/

0/

f/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

m/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

1/

f/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

m/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

2/

f/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

m/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

3/

f/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

m/

patterns/

none.png
stripes.png
spots.png

colors/

red.png
yellow.png
orange.png

lines.png

You get the idea.

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!