Skip to content

Postcards_Stickers

Jack Brett edited this page Jul 8, 2024 · 7 revisions

This page is dedicated to a specific feature requested by a user of LUTE who wised to create a game which centered on collecting 'Stickers' which eventually players would place onto 'Postcards' in creative ways. The idea being that one could create various postcards of their visits that reflect that site which could be shared with others and be used as a keepsake of their visits.

Below is a small outline and guide on how to use this specific mechanic within LUTE.

Key Features

There are some key classes of the Postcard example scene which can be found in LUTESampleExamples>Scenes>LUTEGames>Stickers>StickerBasics. This includes the main Postcard and Sticker class as well as two manager classes that handle the Postcard UI and systems.

Postcard.cs

The postcard class is the base for all Postcards. A postcard will have a name, description, a total sticker limit (i.e., how many stickers are allowed to be placed on the sticker where 0 is unlimited), and a creator (or author). There are also several Feedbacks properties which allow you to play sounds or visuals when the player carries out certain actions (such as opening the postcard or submitting a new postcard).

postcardInspector

Essentially, a Postcard is a container of the above information which also includes a list of Stickers. When loading into an exisiting Postcard, this information is set automatically into the relevant fields and the stickers are placed based on where their locations were last saved. Stickers can only be placed onto a Postcard canvas and we ensure their positions are clamped using logic contained on the Sticker itself.

Sticker.cs

A Sticker is a simple class which comprises of a name, description, image and type. Stickers also have other properties you can play around with including the speed of rotation and scale (i.e., how fast you wish the player to modify the sticker) as well as the minimum and maximum scale that the sticker can have. There is also a property for feedback when placing the sticker (we have created a simple feedback but you may wish to create animations or something more complex in code).

stickerInspector

When a postcard is submitted, it is automatically saved using the built in saving functionality. This will also save relevant information about each sticker on the postcard as well. This includes its transformation (position, scale, rotation) and all other prior mentioned properties. It is worth noting that when switching screen resolutions or aspect ratios, the stickers positions may seem out of place - this is because they may have originally been placed based on one screen size which will look odd when placed on a screen which is smaller or larger. This should not have much effect when sharing postcards on phone screens but will change a bit more drastically if you switch from a phone to a tablet screen.

StickerManager.cs

The postcard manager is responsible for saving and loading postcards and works with the main Flow Engine of LUTE. Upon saving a postcard, the postcard gets saved as a component on the Engine with all relevant information (again, acting as a container for information not an actual object). We create a list of sticker variables which are used to store information about all the stickers that are on that specific postcard. These objects are then parsed to a json file which is used to store and load information when using the saving system.

Working in tandem with the Sticker Menu class, the buttons that are created at runtime to load saved postcards will call a specific method which is contained on the sticker manager that loads a postcard based on an index.

When Postcard achievements have been implemented the logic for determining whether or not a postcard will complete a specific achievement will be implemented into the Sticker Manager.

StickerMenu.cs

The Sticker menu class handles logic related to creating the menu which contains buttons that will load postcards (if any have been saved). The main method of this class will gather any saved postcards from the main Flow Engine, create a series of buttons and then set all relevant information (including the postcard to load) to that specific button. We have created a Carousel style menu but you could change this in any way by customising the prefab itself and/or code is required. Additionally, if you wish to modify the card and button style used in the Carousel menu then you can simply modify the PostcardSelectButton prefab (which uses a title, description and image based on the postcard it will load).

postcardMenu

Sticker Items

The above outlines how Postcards and Stickers work but we have not divulged into how one actually places stickers onto either an existing or new postcard! To keep things within the LUTE and Inventory system workflow, we have created a specific type of Item called a Sticker Item.

Clone this wiki locally