Two Cat Games

presents

Perang: 3 Card Battle

Blueprints image background

Blueprints

Perang: 3 Card Battle was originally created in Java and was entirely text based. I used the code from the Java project to baseline what I needed for the Unreal edition. I'll be posting the Java code here along with screen shots of the Unreal Blueprints.

To examine the Blueprints for this game, I'm going to break it down by classes originally created in Java and then further examine the graphical elements needed for the visuals. Let's get started.

Perang: 3 Card Battle was originally created in Java and was entirely text based. I used the code from the Java project to baseline what I needed for the Unreal edition. I'll be posting the Java code here along with screen shots of the Unreal Blueprints.

To examine the Blueprints for this game, I'm going to break it down by classes originally created in Java and then further examine the graphical elements needed for the visuals. Let's get started.

Click to find out.

If you are unfamiliar with Java classes, you can think of a class as a real-world object such as a card or ball. They each have a set of attributes that define what they look like and how they interact in the world. A ball can be thrown, bounced, caught, etc. A card can be dealt, flipped, burned, etc. A Java Ball Class would have weight, density, size, texture, etc. When an instance of the Ball Class is made, you set those attributes based on what you want it to do such as be a baseball or be a bouncy ball. Both are balls but have very different attributes.

In Unreal Engine, a Blueprint is similar to a Java class in that it defines an object but is created with a visual interface.

Card Card Slot Deck Board State Machines Data Table

The Card Class

Picture of Perang Card

See the full Java Card Class by clicking the button below.

Java Card Class

The Java Card class has five private variables defining the various required attributes which are accessible through public getters and setters along with two custom toString methods for outputting to the console.

Picture of variables from the Java Card Class. Variables are cardId, name, attack, defense and type.

The matching Blueprint class stores those variables as Card Data.

Picture of variables from the Blueprints Card Class. Variables are cardId, name, attack, defense and type.

The following components are needed for the graphics.

Picture of components from the Blueprints Card Class. The components are Card_Back, defendRight, defendCenter, defendLeft, attackRight, attackCenter, attackLeft, Name, and Card_Front

Card_Back and Card_Front are the Static Meshes which make up a single card. The text render values make up the visible card data which can only be seen when the card is face up. Those values are dynamically created for each card at runtime from a data table. More on the data table later.

Booleans were created to assist in a state machine and other external functions.

Picture of Booleans from the Blueprints Card Class. The Booleans are playerCard, hovering, inHand, onBoard, faceUp, and revealRelease.

Location and Rotation variables needed for flipping and moving the cards.

Picture of Locations and Rotations from the Blueprints Card Class.

Card Class Functions

Picture of the list of Functions from the Blueprints Card Class.

Set Card Data From Index

Picture of the Set Card Data From Index function from the Blueprints Card Class.

Hover over image to enlarge.

As it is named, given an integer index, set the Card Data variables. It also sets the text render components. The main reason I made the text render components over a single texture was to keep them data driven. Should I decide to make modifiers for the values, they can be changed the on the fly. The integer index refers to the location inside the data table. Notice there is an unused node, Get All Actors of Class and it’s Get companion. Starting this project, I almost exclusively used the Get All node until I noticed a Get Actor, singular option. This is a much faster way of getting a reference and it automatically makes it a reference over a copy, which is usually the desired effect.

Set Initial Location

Picture of the Set Initial Location function from the Blueprints Card Class.

Function which is designed to be run when the card is created, sets the start and hover locations. This was originally going to set all the location variables, but as time went on, I realized that only some cards instances would need every location variable, so I whittled down this function to just the start and hover variables.

Get Attack/Defend Value From Index

Picture of the Get Attack Value From Index function from the Blueprints Card Class. Picture of the Get Defend Value From Index function from the Blueprints Card Class.

Each card has six attack and defend values, three for each, stored inside arrays. This function takes an integer index to indicate left, center, and right, then returns the corresponding value.

Custom Events

Hover Events

Picture of the Hover Events from the Blueprints Card Class.

On Begin Cursor Over (Card_Back), On End Cursor Over (Card_Front), and playerCard_TempReveal work in conjunction with a state machine to reveal the front face of a player's card when it is face down. This could also have been accomplished by hooking the PlayerCard? Branch directly to the Temp Reveal event. However, during testing, the state machine outperformed the direct hookup. When I say outperformed, I mean that if you quickly swiped the mouse across the screen, the state machine handled the hovering update more effectively. Using the direct hook up, a quick swipe could leave the card or cards face up.

Flip Card Event

Picture of the Flip Card Event from the Blueprints Card Class.

Hover over image to enlarge.

The Flip Card event calls on a timeline to lift the card up and flip it over. It also sets the faceUp? Boolean to match it's current state. The event can be called on a face down or face up card.

Dissolve Card Event

Picture of the Disolve Card Event from the Blueprints Card Class.

Hover over image to enlarge.

The Dissolve Card event is called when a card gets destroyed. A sizzle sound is played and the material is changed to a dynamic dissolve material instance. A timeline is used to change the dissolve variables set inside the material. After it's completion, the card is destroyed.

The base Dissolve Material was instanced from Material Mix by SoerGame. The sizzle sound is from Ultimate SFX Bundle by Sidearm Studios.

The Card Design

The current card design was made in Substance Painter and Blender. It is not, however, the final design. Once it is finalized, I will include a section on its creation.

Next Class: Card Slot

Card Slot →