Card Game UI Effects Tutorials
Published a month ago
Card Game UI Effects Tutorials

1. Package content

Create a new unity project and download the package in unity asset store, then import the package to project by choosing “Assets”, “Import Package”, “Custom Package” and select the package downloaded. The package structure should be the same as Fig.1: * The Assets folder contains five subfolders: Animations, Materials, Prefabs, Scripts and Textures. The files in these folders included in the demo. * The Demo folder contains a demo scene details here. * The Document folder contains a tutorial document.

2. Demo scene

Run the demo scene as Fig.2, the cards in hand will show on the bottom center of unity “Game” window. The draw pile and discard pile locate on the bottom-left and bottom-right corner of the window. For testing the arrow interaction, we put two characters (enemy and attendant) in the demo. The buttons and texts locate on the top of the window.

2.1. Resolution

The UI effects can work in Free Aspect, but we recommend run the demo under 16:9 for the best performance.

2.2. Play card

Click the card in hand then an arrow will extend from the card to mouse. When the arrow touches the different characters, its color will change to express hostility or friendly. At this time, click the character will play the card, then the attack icon or defense icon will display on the head of enemy and attendant. After that, the card will be thrown into the discard pile.

2.3. Draw/discard

Click the “Draw” button will add a card in hand from the draw pile. Click the “Discard” button will discard all cards in hand to the discard pile. Besides the two buttons, the text “Draw Pile: 10” and “Discard Pile: 0” are used to show the card number in the draw pile and discard pile. When there are no cards left in hand and the draw pile, all the cards will be sent from the discard pile to the draw pile. After that, five cards will be sent to hand automatically. The demo only supports at most 10 cards in hand, please don’t modify the upper limit in the script, which will result in bad performance.

3. Scripts

The Scripts folder contains CardEffects , CameraController, EffectController, ToastController: * CardEffects is the component of the gameobject “HandCards” in the hierarchy tab. It’s the most import part of this package. All the card effects, interactive arrow and game logic are controlled by this component. The introductions of parameters in this component are commented well with the ToolTip in unity editor, Fig.3. * CameraController is the camera’s script component, which is used to adapt resolutions of different aspects. This script is only designed for the demo, we don’t focus on working with the multi-screen adaptation, so there are still lots of work to do. * EffectController is the component of “AttackIcon” and “DefenseIcon” prefab under Prefabs folder. * ToastController is the component of “Toast” under the gameobject “Canvas” in the hierarchy tab. Its attribute “duration” controls the duration time of the toast.

LoBeyJon Game
Unity Game Developer - Programmer