Ccgtoolkitdocumentation v1-1
Ccgtoolkitdocumentation v1-1
It is also recommended that building the project or launching the game through .uproject file during development
will help uncover any inconsistencies that may arise early on.
To test the toolkit with only a single player, navigate to the game mode blueprint and enable “Single Client Enabled”
bool in the settings. This will work for both building and launching the client through
Card Game State The Card Game State is used to hold the current, replicated state of the game.
(Replicated) It handles:
- Game and Turn Timers
- Player Turn state
- Notifying players of the end game state
Card Game Instance The Card Game Instance is used for traversing data between levels and menu
(Client) states across the game.
It handles:
- Current Platform
- Game Menus
- Menu Selected Arena
- Menu Selected Card Set
Card Game Camera The Card Game Camera is a data only blueprint. This handles automatically setting
(Client) the correct player view when entering the game.
Card Game Player State The Card Game Player State is used for replicated data between clients.
(Replicated) It holds:
- Player Card Game ID
- Player health
- Mana
- # of Cards in Hand
- # of Player Turns
- Cards in Deck
- Active Cards
Card Game Player Controller The Card Game Player Controller manages player specific gameplay functions and
(Server and Owning Client) player / card interactions.
It handles:
- Deck Setup
- Game UI
- Creates and Spawns (Server) Card on the board
- Player and Card Interactions
- Holds player specific turn state
- Updating UI
- Card Pickup and Management
- Developer Gameplay (Server) Tools
Card Manager The Card Manager creates, manages, and directs card widgets on screen.
(Client) - Card Widget Creation and Setup
- Manages and Notifies 2D Card Widget Positions
- Sets and Controls Interchangeable layout Profiles
- Card Position Editor
Version 1.1.0 Page 4
Card Widget The Card Widget is the playable card which is displayed in hand and holds relative
(Client) functionality.
It Includes:
- Screen Positioning and Movement
- Card Preview state (In-Hand) (PC and Mobile States)
- Drag Card from hand functionality
View Card The View Card is a 2D visual container that can be easily be modified and filled
(Client) with card specific data without needing to change or risk breaking gameplay
related functionality. When called, the View Card will populate itself with the
requested card data and display visuals. It handles both Facing and Face down
card states.
3D Card The 3D Card is 3D container that can easily be modified visually, and holds
(Replicated) gameplay related card functionality. When populated with the given Card data, it
is used to interact with other cards on the board.
- Holds Card specific gameplay data
- Sets Turn/State visuals
- Basic Movement functionality
- Apply/Receive Damage
- Trigger Ability
- On board mouse over Preview
Board Player The Board player is a means to apply damage to the opposing player. Data is
(Replicated) simply passed to this actor and it visually represented to both players.
Card Placement A Card Placement actor controls how, who, what and where cards can be placed
(Replicated) on the board.
Graveyard Graveyards are a selective asset which can be added to the board. It holds “Card
(Replicated) in Graveyard’ data which can be accessed at a later date.
Assets
A number of assets have been included to display the setup and interaction with different elements within the
toolkit. All these assets are free to use however you like, and can be used as a base for your own designs.
Card Frame Card textures have been scaled down to be 512x1024 when saved from
(512 x 1024) Photoshop, however scaled up to 768x1024 in the widget and 3D models UV.
Mobile devices require this size as some issues can occur if they aren’t in multiples
of 2.
The same texture is used for the 3D card material.
Card Images Card Images have been imported at a size of 512 x 512.
(512 x 512) The same texture is used for the 3D card material.
3DCard model The 3D card is the visual card model used when a card is placed on the board. The
(64 Tris) model holds four separate UV channels:
- Card Image
- Card Frame
- Card Back
- Shadow/Effects plane
Card Frame and Card Image Both the Frame and Image have material instances being used by the 3D card
Material Instances model. This allows for a visual change to occur during the game.
The features within the toolkit have been designed to be interchangeable, user friendly, and only focus on core
elements of the game type. This allows for quick setup, iteration, and even change in the underlying focus of the
toolkit to meet the needs of your game.
Several core elements of the toolkit are required for an error-free experience when first beginning with the toolkit.
All of these features have already been setup within the example Arena’s or throughout, however it will be beneficial
to keep these points in mind if you wish to start from a stripped down version of the toolkit.
Card Set
At least one card set should be included within your game. Card sets are tied to a number of different systems which
is required to have any interactivity with the other elements of the framework.
These cameras have their “Auto Activate for Player” property set for both Player 0 (Player 1) and Player 1 (Player 2).
Board Players
In addition, two Board Player actors will also need to be added to the game so the players can see and interact with
their opponents.
Both board players will have their Player Index set either 1 or 2, respectively.
Card Placement
And finally, at least one Card Placement should be added to the game. Depending on your game and its needs,
setting the player index on these will allow you to control who can place cards, and where on the board.
Setting this to 0 will allow any player to place cards, but setting to 1 or 2 will only allow that corresponding player to
place cards (Unless the Card specifies otherwise).
Summary
- 1 x Card set
- 2 x Card Game Camera’s
- 2 x Board Players
- 1 x Card Placement
Below is a list of the main options that can be customized with the toolkit:
Note: The Deck Builder has been designed for the PC platform. The framework can still be used as a foundation for your game, however it
would be highly recommended to redesign the user interface and widget designs to work more with your intended platforms. Like many other
features within the toolkit, mobile devices and smaller screens can still use the Deck builder and its features; however the widget sizing and
performance may not be user friendly mobile platforms.
Note: See Tutorial “Adding your Card Set to the Game” for adding card sets to your library
The card library features several useful filters and sorting options. These include:
- Filter cards in the library by Card Set, Card Type, Rarity, and additional special filters
- Search bar for searching for cards by their name
- Order cards in the library by Name or Mana Cost
- Select all or specify card sets to look and filter through
The card library is visible while both Load deck and Edit Deck menus are displayed, however selecting cards within
the library will function slightly differently in both of these states. A simple card preview can be displayed when
selecting a card in the library when the Load deck menu is displayed, while selecting a card when the Edit deck menu
is displayed will add the card to the deck.
Edit Deck
When creating or having a deck being editable, the Edit deck window will be displayed next to the card library in
place of the load deck menu. This window allows users to set their own custom deck names, view, customize, and
save their decks.
Different card states which can be seen within the card library
When a card is selected through the library and added to the deck, a card row will is added and to the scroll window.
The card row is used to represent the card within the deck, and displays the mana cost, card name and the number
of that card which has been added. Card rows also allow users to manage adding, subtracting, or removing cards
directly, or simply display a preview when pressed.
Premade Decks
While being able to create custom decks is extremely useful and fun within a card game, developers still like to have
the option to be in control of some of the decks without needing to dig into to the game and save out decks.
Premade decks can be easily created within the “PreBuildDecks_DataTable”.
Note: The deck editor is currently setup to create ALL decks within this table on startup. This can be changed by adding conditions to the
”GeneratePreBuiltDeveloperDecks” function within the Deck Builder.
The data table is very simple, and only requires developers to give a card name (data table name) and the number of
cards to add it to a deck. It also includes a space for giving a description and setting whether the deck is editable by
the users (in the deck builder). The decks are still restricted by the rules enforced by the deck builder, including the
max number of cards per set, and how many of each card is allowed in the deck.
Card Sets are defined as a group of cards with a similar set of attributes, goals, or reliability. Data Tables are used
to separate and create these sets within the toolkit, which allows for fast and iterative changes as the designs seem
fit.
Card Sets are separated into several folders to make it easier to add, remove, and update card.
- Card Set Data Table - Specifies all the cards and card data in the set.
- Textures Folder- Card Set related textures
- Materials Folder- Card Set related Materials
- Effects Folder- Card Set related effects
2. Create a new Card Set folder and Name your Card set
Tip: These additional folders will hold all Card Set specific textures, materials and effects! Assets such as the card
image or frame will be stored here.
4. Within your new card set folder, Right Click and go to and select Miscellaneous -> Data Table
Tip: The Card Struct is used for all cards in the game. The Struct itself holds a number of Sub-structs which holds the relevant
card data. Sub-structs are a great way to separate functionality, and allow for a wide range of features to become available and
easily added when creating cards.
In the CCG Toolkit, a Card is made up of a large number of elements for visual, gameplay, and framework
specific data. Every card no matter how broad or specific it may be holds or links all its settings and values
within the data table.
This data is used throughout the toolkit and it is passed each time the card row name is called by the
framework. The data is used to fill gameplay containers; however it can also be accessed through custom
functions which have been pre-setup to make this as easy as possible.
Cards can be seen in two different states. 2D Widget and 3D blueprint actor card states. Both of these use the
same card data row to fill pre-setup containers and allows for a split aesthetic between the two states if you
choose to do so.
Tip: The data table is comprised of two sections. The first sub-window can be seen as all the cards in the set. The second window
holds all the data for the selected card in the set.
2. Select the '+' Icon to add a new row
Tip: The Row name is what is used to gather the card data throughout the toolkit. The Example demo simply
copies the card name here so they can easily be selected when prototyping, however you might want to add
project specific code names like [CardSetName]_[CardNumber]_[Type] to more specifically distinguish where the
card comes from in the set.
Tip: For now, try and skip adding an ability to this card. We will get there soon enough Just skip the section as it won’t have
any effect.
4. Save
Tip: Adding additional cards to the set is as simple as adding another row to the data table.
Continue to Adding your Card Set to the Game to learn how to let the demo know about your new Set!
Tip: To see your card in game more quickly, feel free to follow these same steps on one of the Basic_Set included in the
toolkit!(It Is already setup for you ;) )
Adding a card set to your game requires a few custom changes for supported features to be able to read and
perform correctly. Once the card set has been added to these areas, they will be callable and/or displayable
throughout the toolkit
There are 3(4) files a new Card Set will need to be added to:
- Card Set Enum: Holds all the active card sets within the game. If a set has not been added or you would like
it to be removed, even temporarily, simply remove the set from this enum.
- Card Game Player Controller: Filters which card set/deck the player has chosen.
- Get Card Data Function: Streamlines the process of getting cards from multiple card sets. The functions filter
the card name and card sets to return the correct data for the function being called.
Note: When calling for a card (as of Update 1.1) the toolkit will search through each card set until it finds the requested card.
You can still specify a card set directly, however the requested card may not be returned correctly.
Extra Points:
- Card Manager: The Card set will need to be added to the relative editor BP’s for it to know about the new
set. This will give the developer access to the card set in-game and allow them to pick up specific cards, try
different combos, or test a new card which has been added to the game.
2. Open CardSet_Enum
3. Add a new enumerator
4. Name your new card set
5. Save
6. Back in the content browser, Navigate to:
CCGToolkit -> Blueprints -> FunctionLibraries
7. Open Deck_FunctionLibrary
8. Open the GetCardData function
Tip: You will notice a new note on the switch! This is because the framework now knows about your new card set, but we still
have to tell it where to get the data from.
9. In this section we will link the data table to the hungry nodes. Drag off the Switch node from your card set
name, and add a Get Data Table Row node
10. Using the drop down, specify your new sets data table
11. Plug in the Card Name input into the node.
12. Drag from Out Row on the Get Data Table node and drag it into the specified Select node.
Tip: You can use the already setup data tables as a reference when following these steps.
Note: This function will get a specific or all card sets based on its input. This has been added in Update 1.1 for the Deck Builder;
however it can be called and used throughout the toolkit.
14. Similar to the preview steps, copy and set the GetDataTableRowNames and Append nodes to a new row
below
Note: You can use the available sets included within the toolkit as examples of how you new set will need to be connected.
2. Open CardManager
3. Select the Graph, and select the Card Position Editor Event Graph
4. On the top right column, in the comment box which reads Populate and fill the 'Card
Set' and 'Card List' combo Box's, Link your new card set from the switch into the Get
Selected Data Table Row Names collapsed graph
5. Open the collapsed graph and set your card set to the corresponding Get Data table
Row Names node
6. Back in the Card Editor graph, drag the corresponding array output into the Select node
7. Compile and Save
Your new Card Set has now been added to the framework!
Now the card within the set can be accessed, you can easily test this by opening up the deck builder and select the
card set tab which will automatically become available.
Abilities at their core define trigger-able functionality that can provide an interesting and unique twist to the game
type. What an ability does, or how and when it is performed requires a solid yet flexible system with high amounts of
customization and control within a few clicks of a button.
Abilities can be created anywhere, however it is recommended to add them to Function Libraries which helps sort
and separate functionality. The toolkit includes a single function Ability library, but as games grow you can also use
this method to create multiple function library packs which hold similar abilities.
Something to keep in mind when designing your own Abilities is to keep things open to change and to give designers
access to tweak these abilities during the card creation process. Rather than hard coding specific variables, try to
keep these open and add Card functionality which allows designers to change or tweak the way which the ability
functions in-game.
As the toolkit grows, more supported customization options will become available, but for now the most useful way
which this can be done is through the Ability Int which can be found in each card when one is created.
For example, this Ability Int can be used to specify the number of times an ability will run, or the value of a stat boost of a card.
To do this, each function will need access to the ability section of the card. This is not 100% necessary; however it is
good practice and recommended to get the most out of the framework.
2. Open CardAbility_FunctionLibrary
3. Add a new Function
4. In your New Ability, select the execution node and add two (2) new inputs
5. Change the class types to the following:
And now the fun part! Creating the functionality for your ability! But first a precondition…
6. For the purposes of this tutorial we will create a simple ability. Firstly, drag off the Calling Card input and
search-and-select Ability Struct Refs reference
7. Off the Ability Struct Ref node, add a get node and link the Ability Index to the relevant get node
8. Break the Ability Struct result from the get node.
Tip: Your ability now has access to your ability Struct data which you set in your Card data table!
Tips: As we want to leave this open for change or for another stronger card
to possibly give more attack, we will leave the value of + attack to be set in
the cards data. Also, we don’t want the calling card to add attack to itself, we
will need to do a check for this too.
10. Firstly, we want to access the player’s cards on the board. Off the calling card reference, drag and get the
owning player
11. Drag and get the Card Game State reference off the owning player
12. Off the Game State reference, select the Get Board State function and connect the calling player controller
input
13. Add a ForEachLoop and connect players board state array to the node
14. The second half of the function will be checking and adding attack to friendly creatures on the board
a. Get the Card Type (Returned Array Element)
b. Add an == Creature check
c. Next, we want to add a check to see if the Card is a creature AND it does not equal the calling card
d. Connect the AND node to the branch created earlier
16. Save
Completed graph:
17. As the functional part of the ability has been completed, we can now add the ability to the list. Navigate to:
26. Duplicate the Self and Ability Index Ref variables and link them to your new ability
27. Compile and Save
While some cards may have abilities, keep in mind that they don’t necessarily need to be seen or told to the player.
How abilities have been setup within the toolkit also provide a highly customisable system that can trigger
functionality that can be tied into specific event triggers.
Adding or removing a stat boost to the current or other cards on the board is one example of how this system can be
used. While the player is told about a change in one of the cards stats, removing the boost when an event is
triggered, the card is removed from play, or change occurs in the state of the game, might not be told to them but it
can still use the ability framework.
Tip: Cards are automatically given a single ability slot, but this is set to be empty. It is advised to keep this (And it won’t have any effect in-
game) if your card does not have any abilities.
Tip: Adding Multiple abilities is as easy as selecting the + icon in the ability section of the card data table.
Card layouts have number of benefits including the options to load and change them during the game. While the
game might support a default layout for players to view their cards, having layout profiles allows the cards in hand to
dynamically change their position based on a group of pre-set values which can change along with the game or
current game state, smoothly.
The Data collected from the layout profile goes through a short pipeline of calculations which determine their final
position. This calculation is based positioning profiles which the toolkit can use to calculate the position of the cards,
optimize, and customize how the data selected is used and sent to the Card Widgets on screen.
The game state ultimately determines which profile is currently selected, which is how layout profiles are changed
and loaded. As most things within the toolkit, setting these states is extremely simple, a simple layout row name call
connected to a state switch will change and update the card positions.
The example demo uses these layout profiles to change card positions when a card is being dragged from the player hand and at the
beginning of the game to display the player first hand.
4. Change a number of different positioning variables in the editor until you are happy with the result
5. With the Game window still open, in the content browser go to:
6. Open CardLayouts_DataTable
7. Select the '+' Icon to add a new layout row
Tip: You can use any of the default layouts as a base, just find the one that suits your designs and then begin tweaking it to fit
your needs. It is advised to add new layouts instead of overwriting the defaults. Keep them as examples in case you need to
come back to them later.
Tip: If you want the layouts to use the horizontal profile, add "Horizontal_" to the start of the layout row name. This will
automatically be picked up by the editor and use the calculative profile for this.
7. Add the variables relating to the positions as seen in the editor to the data table.
Tip: You might not see some of the options in the data table in the in-game editor. These options can still be set and used,
however they cannot be accessed through the in-game editor.
Bonus! - Set your new card layout as the default layout on startup
Why did my in-hand card image change but not the card on the board?
The cards in the player hand and on the board use two different references; however they do use the same texture
by default. The cards in the players hand use the first 3 visual texture references in the data table, where the cards
on the board use 3 separate material instances to be used and changed on the board. Simply create/duplicate a
material instance for the card image based on and set the same texture reference to have this display on the board
cards.
Note: Also make sure you SAVE the data table before trying to play with your card updates. This is simple, but can commonly pop up from time
to time.
Where can I run checks when the player is trying to place a card on the board?
"Play Card" is a server side function within the ‘Card Game Player Controller’ which runs a number of checks, charges
the card mana from the player, and spawns a card on to the board. This function can be used to check, stop, or
change how a card is played, and is authority guarded so it only occurs server-side.
How do I connect to other players via the Internet and not just over LAN?
Server setup cannot be shipped with the toolkit and will require users to compile UE4 using the source from GitHub
(Link) to run. The project will also need to be converted to a C++ project in order to successfully run the server. The
toolkit has been setup within the engine to support both dedicated and listen servers once the prior steps have been
performed, and a server can be successfully started to host your game.
How can I set the PIE deck without starting a game through the menu?
Because unreal does not fully support connecting to multiplayer games within the editor (connecting to a game
through the menu causes some issues with setup) selecting the deck being used to test your game requires
developers to set the “SelectedCardSet” string within the “CardGameInstance”. Once this has been done, developers
can easily start PIE sessions on selected Arenas through the editor and have card sets playable. Alternatively, you can
also test your game through building or launching your game via the project executable.
Note: See ‘Recommended Editor Setup’ to know how to launch standalone client’s
Note: This section will be updated over time with frequently asked questions about the toolkit. This comes from all the users of the toolkit so if
you have any questions not seen here, send them to the support email at the end of the document.
Features:
The Deck Builder is an interactive interface that allows users to easily create, customize, and save custom
decks.
Deck Builder Features list:
o Filter cards in the library by card Set, card type, rarity, and additional special filters
o Search bar for searching for cards by their name
o Order cards in the library by Name or Mana Cost
o Select all or specify card sets to look and filter through
o Load decks
o Save (Unlimited) custom decks
o Edit custom decks
o In-menu screen card preview
o Dynamic deck mana graph
o Special data table that allows designers to create developer made decks for players and/or AI. Decks
are created and instantly playable in-game after loading the deck builder.
o Customise the Min and Max number of cards in the player deck
o Edit custom deck name
Custom “Deck filters” function library for filtering and collecting data about the deck or input cards array
Custom ‘Save’ function library for creating, loading, and saving decks
‘Card Rarity’ can now be set on cards
Connect to games Via IP option when joining a game
Note: This still requires the right router/server setup to successfully connect to players across the internet.
Documentation Updates:
Added: Recommended Editor Setup
Added: Out of the box Options
Added: Deck Builder Overview
Updated: ‘Adding Card sets to the game’ tutorial
Updated: ‘Ability Creation and Setup’ tutorial
Added: FAQ’s
So if you have any questions, what to show off something cool you are
making with the toolkit, or simply need some tips about anything that
may not be included in the documentation...
Email: [email protected]
Or
www.ccgtoolkit.wordpress.com