An in-game encyclopedia usually consists of entries and images for things related to the game. For example, pokemon's pokedex. Image of Pokemon, text description and so on.
I've happen to encounter a road block of sorts making a game with an "encyclopedia". From my database, each row is one object with several columns as the different property of the objects. (I know that might sound like redundant information to some devs. Don't kill me pls. I'm just trying to be clear.)
It goes somewhere along the lines of:
Name | Rarity | Pattern | Collected Ramen | Rarity 1 | 1 | Yes Ramen | Rarity 1 | 2 | Yes Ramen | Rarity 2 | 3 | Yes Udon | Rarity 5 | 1 | No
So the issue here is this: Game Encyclopedias tend to have a black silhouette for items you have yet to collect and it's colored in after you've collected it. Each item can have a 'pattern' on it, making it either differently colored or sparkling. Though, the shape remains constant.
Basically, the silhouettes can just be repeated for each item that is of the same type, for example, all "Ramen" items have the same silhouette so if they aren't collected yet, reuse same image. I thought I could probably tint the images and have a base image (light gray of sort), but if I did that, the entire image tints, even the parts I wouldn't want it to, which includes but is not limited to: white spaces (or transparent), the "bowl" part of the ramen image, possibly added on "sparkle effects" for even rarer items.
I'm currently attempting to achieve this in a game using the Ionic Framework because I recently got into hybrid apps; I think they are pretty fun to develop! And has since learnt angularjs and js in general. No idea the exact process that Cordova (phonegap) uses to convert all of this into android and iOS so I'm sort of looking out for three things:
1) How to link/pair/associate my database with my image asset? 2) How do I specifically tint certain parts of an object/Or overlay two objects over each other, one tinted and one base coloured. 3) Does it work on the mobile platform AFTER it compiles from js to Java. (Only working on android at the moment).