While the plugin is the engine to help you get going, how cards look or payout is all up to you. While you get to play with a few built-in templates, the plugin fully supports custom designed cards!
Before you begin designing, the first thing you need to decide is the size of the card.
You can technically use any size, but it should be one that fits your website. If most of your website visitors use mobile devices to view your website, you should take this into account as well. You can always look into what is the most common screen resolution your users use when planning how big the card should be.
The plugin playfield, where the card is shown works best when cards are able to fit in it’s original size. If the playfield becomes smaller, the card will be scaled, but this can affect how the card looks.
You should also take into account if you plan on having multiple sets or just one. If you for example plan on showing multiple cards in the same playfield, the cards should be of a size that fits the playfield nicely.
Each scratch card consists of three images:
- The “Scratch Cover” or “Cover Image” is the image that a user “scratches” using their mouse or on mobile devices, their fingers.
- The “Background Image” which is revealed when the Cover Image is scratched.
- And the “Coin Image” which is what the users cursor is replaced with.
The Cover image is usually transparent with only the “Scratch” area on it, but you can create two completely covered images if you prefer.
In the above Treasure Cove example, you will see we require you to scratch a card that contains a point value three times. If it does, you win that amount. This is just one example of what the game is about, but you can create any other form of games using shapes, letters, images, anything your imagination can muster. If you prefer, you can even just have the words “No Win” or “Winner!” for very basic games.
As a bare minimum, we must create at least two background images. One that is shown when the user wins and one when a user does not win. You can however add as many cards as you want for both situations to give more variation. If you only have one, sooner or later users would be able to see if their card is a winner or not by the smallest scratches, taking the fun out of it.
The built-in templates showcase this, where the “Treasure Cove” template provide a lot of variations for winning and losing cards while “Fireworks” is the simplest of them all with just one winning and one losing card.
Example of no win variations:
The Cover Image is what we will be scratching away. It can be an image that covers everything or a transparent image with only an area visible, indicating where to scratch.
The most important thing, is that the Cover Image must be the exact same dimension and resolution as the background images!
While a user has the mouse hovering over the scratch card, the cursor is replaced with a “Coin Image”. This image can be anything you like and does not need to be a “coin” per say. Just remember to make sure the coin is proportionate to the card.
A coin image is mandatory and if you do not provide one, the plugin will use a default image.