Hybrid App - Game Encyclopedia Image Asset

Question

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).

Answer 1

The first issue, if I understand it, is easy. Make transparent item tiles. If an item has been collected, your program draws the black silhouette. If it hasn't been collected draw a coloured image. Any patterns can be placed over the top. It is a lot simpler, and uses less processing power, to have separate images, rather than render them using different configurations. Just store these in a two-dimensional array. The patterns that are going to overlay the tiles can be stored separately ready to use -- just draw the pattern in the same place as the original tile. Your later questions are too broad. You need to say what framework/language you want to use and post some sample code