Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
News - A deep dive into the making of King of Cards’ Joustus mini-game

#1
A deep dive into the making of King of Cards’ Joustus mini-game

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game.png" width="243" height="77" title="" alt="" /></div><div><p> <!-- Google Tag Manager --> <!-- End Google Tag Manager --> &lt;!– –&gt; <title>Gamasutra: David D’Angelo’s Blog – King of Cards: Joustus Deep Dive – Part 2</title> <!--[if lt IE 9]&gt; <a href="http://html5shim.googlecode.com/svn/trunk/html5.js">http://html5shim.googlecode.com/svn/trunk/html5.js</a> &lt;![endif]--> <!-- CSS --> <!-- link href="https://twimgs.com/gamasutra/css/minified.css" rel="stylesheet" type="text/css" / --> <!-- Mobile Specific Metas --> <!-- Start Visual Website Optimizer Asynchronous Code --> <!-- End Visual Website Optimizer Asynchronous Code --> <!-- Start HeatMap.me Code --> <!-- End HeatMap.me Code --> <!-- Start: GPT Sync --> <!-- End: GPT --> <!-- Eloqua tracking code --> <!-- End Eloqua tracking code --> <!-- Google Tag Manager (noscript) --> <!-- End Google Tag Manager (noscript) --> <!--Cookie banner code starts here --> <!--Cookie banner code ends here --> <!-- Informa Branding code goes here--> </p>
<div id="iribbon-container" class="content-body-wrapper"> <button id="iribbon-title" title="show/hide" class="inactive">Informa</button> </p>
<div id="iribbon-detail" class="ribbon-hide">
<div id="iribbon-left">
<p>Gamasutra is part of the Informa Tech Division of Informa PLC</p>
</p></div>
<div id="iribbon-right">
<p>This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC’s registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.</p>
</p></div>
</p></div>
</p></div>
<p> <!-- Informa Branding code goes here--> <!-- Beginning Sync AdSlot 19 for Ad unit Gamasutra//independentgames ### size: [[2,2]] --> <!-- End AdSlot 19 --> <!-- Beginning Sync AdSlot 20 for Ad unit Gamasutra//independentgames ### size: [[7,7]] --> <!-- End AdSlot 20 --> </p>
<div class="container">
<div id="container-main" class="content-body-wrapper"> <!-- Google Prestitial Ads start here--> <!-- Google Prestitial Ads end here--> </p>
<div class="container bottom3">
<div class="span-7"> <a href="https://www.gamasutra.com"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game.png" alt="Gamasutra: The Art &amp; Business of Making Games" width="243" height="77" border="0"></a><img alt="spacer" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game.gif" width="27"> </div>
</p></div>
<div class="span-20"> <!--end show phone--> <!--end showphone--> <!--end nav--> </p>
<div class="span-20 last content_bg">
<div class="hide-phone">
<div class="span-4">
<div class="content_box_left">
<div class="leftcol"> <!--member login--> <!--end memberlogin--> <!--begin social icons--> <!--begin social icons--> <!--end social icons--> <!--end social icons--> <!--begin page numbers--> <!--end page numbers--> <!--begin leftnav--> <!--end leftnav--> <!-- Beginning Sync AdSlot 3 for Ad unit Gamasutra//independentgames ### size: [[164,59]] --> <!-- End AdSlot 3 --> <!-- Beginning Sync AdSlot 4 for Ad unit Gamasutra//independentgames ### size: [[164,59]] --> <!-- End AdSlot 4 --> <!-- Beginning Sync AdSlot 5 for Ad unit Gamasutra//independentgames ### size: [[164,409]] --> <!-- End AdSlot 5 --> <!-- Beginning Sync AdSlot 9 for Ad unit Gamasutra//independentgames ### size: [[164,177]] --> <!-- End AdSlot 9 --> <!-- Beginning Sync AdSlot 11 for Ad unit Gamasutra//independentgames ### size: [[164,177]] --> <!-- End AdSlot 11 --> <!-- begin event tickers --> <!-- end event tickers --> <!--begin jobs--> <!--end jobs--> <!--begin blogs--> <!--end blogs--> <!--begin press releases--> <!--end press releases--> <!--begin calendar--> &lt;!– </p>
<div class="header"><img loading="lazy" alt="arrow" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-1.png" width="22px" height="20px" /><a href="http://www.gamasutra.com/calendar/calendar.php">Calendar</a></div>
<div class="leftnav bottom2"> <a href="http://www.gamasutra.com/calendar/calendar.php"><strong>View All</strong></a> &nbsp;&nbsp;&nbsp; <a href="http://www.gamasutra.com/calendar/calendar_submit.php"><strong>Submit Event</strong></a> </p>
<hr>
<ul> </ul>
</div>
<p> –&gt; <!--end calendar--> <!--begin about--> </p>
<div class="bottom2"> <a href="https://www.gamasutra.com/advertise"> <img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game.jpg" alt="Sponsor" border="0" class="whiteTop" width="177px" height="60px"> </a>
</div>
<p> <!--end about--> <!--begin network--> </p>
<div class="leftnav_network bottom2"> If you enjoy reading this site, you might also want to check out these UBM Tech sites: </p>
<hr>
<hr>
<p> <br class="clear">
</div>
<p> <!--end network--> <!--begin store--> <!--end store--> </div>
<p><!--end leftcol--> </div>
</div></div>
<div class="span-16 last">
<div class="content_box_middle"> <!-- InstanceBeginEditable name="BodyContent" --> </p>
<div class="page_item">
<div><a name="twitter_share" href="http://twitter.com?status=RT @gamasutra: King of Cards: Joustus Deep Dive - Part 2 http://www.gamasutra.com/blogs/DavidDAng...07/374853/" target="_blank" rel="noopener noreferrer"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-1.gif" alt="Share on Twitter" border="0" height="20"></a> <span id="edit_post_link"></span>&nbsp;&nbsp; <a href="https://www.gamasutra.com/blogs/rss/"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-2.gif" width="15" height="15" border="0" alt="RSS"></a> </div>
<hr>
<div class="item_body mobile_image_transform"> <strong><i><small> The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.<br />The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company. </small></i></strong> </p>
<hr>
<header>
<p>Welcome, deck builders!&nbsp;<a href="https://www.gamasutra.com/blogs/DavidDAngelo/20200914/370045/King_of_Cards_Joustus_Deep_Dive__Part_1.php">When we last left off</a>, we had created a self-contained card game on paper!&nbsp;In this part, we’ll talk about how the initial design of Joustus&nbsp;was implemented&nbsp;and how we extended it to accommodate the expanding scope of the platforming game.</p>
</header>
<h2><strong>Part 2 – Fleshing Out Joustus</strong></h2>
<p>It was a pretty straightforward process to recreate our paper card game prototype!&nbsp;Once we had our no-frills version up and running, there were a lot of kinks to work out in regards to displaying what was happening. How would we show a card&nbsp;being pushed? How would you know whose turn it was and if you were winning or losing? We&nbsp;kept these questions in mind as we progressed towards fleshing out&nbsp;the final layout.</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/image-5.png" title="This was early playable Joustus with temp art! Not a lot of details or information, but it was a start!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-2.png" title="image (5)"></a></p>
<p>This was early playable Joustus with temp art! Not a lot of details or information, but it was a start!</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/earlyBoard.png" title="This mock up has some more information: a picture of you and your opponent, a coin to indicate turn order, a deck that can deplete, and some gem icons to indicate who claimed what. You can also see that the players have different colored cards and arrows!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-3.png" title="earlyBoard"></a></p>
<p>This mock up has some more information: a picture of you and your opponent, a coin to indicate turn order, a deck that can deplete, and some gem icons to indicate who claimed what. You can also see that the players have different colored cards and arrows!</p>
<p><strong>What’s Gonna Happen If I Do This?</strong></p>
<p>We&nbsp;realized that it would be challenging for the player to have to remember&nbsp;all of the card’s move options and&nbsp;abilities right off the bat. We developed a few ways to&nbsp;remedy this problem:</p>
<ul>
<li>Wherever you&nbsp;move&nbsp;your cursor, a preview animation shows what will happen if you place your card there.</li>
<li>Instead of freely moving your card around, the input will force you to click through every possible action.</li>
<li>The info bar at the bottom describes every action taken and gives instructions about the rules.</li>
<li>You can examine a card and see its card info at any time.</li>
</ul>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-3.gif" title="The info bar describes whether each move is valid and why. The preview shows why the move can't be made or what will occur if the move is made."><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-3.gif" title="bottomInfo"></a></p>
<p>The info bar describes whether each move is valid and why. The preview shows why the move can’t be made or what will occur if the move is made.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-4.gif" title="You can learn about any board square or card at any time. Always nice to have a refresher!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-4.gif" title="card_info"></a></p>
<p>You can learn about any board square or card at any time. Always nice to have a refresher!</p>
<p>By putting the info front and center and describing the reasoning for everything, the player learns a little almost through osmosis.</p>
<h2><strong>Coming up with Card Abilities</strong></h2>
<p>We had a lot of ideas to extend the game beyond the single and double arrows. We wanted cards to have their own unique abilities!&nbsp;Such as the ability to blow up another card, flip its allegiance, push in many directions at once, or return from the graveyard!&nbsp;Our card concepts&nbsp;were conceptualized&nbsp;via a shared doc, as we often do with design brainstorms.</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/brainstorming.png" title="We use spreadsheets like this to brainstorm! This is just a tiny portion of all the ideas we come up with for any feature!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-4.png" title="brainstorming"></a></p>
<p>We use spreadsheets like this to brainstorm! This is just a tiny portion of all the ideas we come up with for any feature!</p>
<p>We&nbsp;quickly&nbsp;realized that there were complications to adding card complexity. If you wanted to blow up a card with a bomb, how would that even work? Could&nbsp;card abilities be something you can activate with a button press? This unfortunately would be too complicated and difficult to control. It also led to a new problem of how would they activate! We decided that it could trigger in other ways! Such as when you place a card down, when you push a card, or at the end of the turn. Some abilities could&nbsp;be tied&nbsp;to specific arrow directions creating a “bomb arrow”. While other passive attributes like ‘flying’ would always be active.&nbsp;The brainstorm ideas&nbsp;were categorized&nbsp;based upon the&nbsp;aforementioned&nbsp;criteria to see how they’d all fit in. We came up with:</p>
<ul>
<li>Arrows – special actions tied to arrow directions, activated by a variety of circumstances</li>
<li>Abilities – special actions that are either always active, or happen if certain conditions&nbsp;are met<br />We decided that&nbsp;we’d have a&nbsp;maximum&nbsp;of one Arrow Type and one Ability per card.&nbsp;That gave us enough options to make dozens of unique card permutations, while also keeping it simple.</li>
</ul>
<p><strong>Single / Double Arrows</strong></p>
<p>Double arrows were one of the only special arrow types prototyped on paper. They could push single arrows around, but treat other double arrows as equals. This was the simplest escalation we could imagine. We toyed with how arrows could&nbsp;be handled&nbsp;inside a given row or column- should they add up their power or stack up?&nbsp;Ultimately, we decided to keep simplicity! The strongest arrow in a row/column would be what combatted your placed card.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-5.gif" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-5.gif" title="arrows"></a></p>
<p><strong>Bomb Arrows / Rocks</strong></p>
<p>Bomb Arrows blow up a card instead of pushing it, removing it from the board. Besides being cool&nbsp;thematically, these cards are useful for clearing out space.&nbsp;Initially, you could use the bomb when you first placed it (which was too overpowered). We changed it so that bomb cards took one turn to “arm”. This lesson&nbsp;was applied&nbsp;to later designs like Conveyor Arrows.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-6.gif" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-6.gif" title="bomb"></a></p>
<p data-offset-key="fpk0u-0-0">Rocks were&nbsp;initially&nbsp;created to give Bomb Arrows more to do. This led to more questions! If a rock entered the playfield, did that&nbsp;space count as&nbsp;being occupied&nbsp;for the purposes of ending play? If I blow a rock up on my next turn while the squares were all filled on your turn, should the game end or not? We went back and forth, and decided that the game should end!</p>
<p data-offset-key="8qddb-0-0"><strong>Conveyor Arrows</strong></p>
<p data-offset-key="1p3ah-0-0">An arrow that pushes itself seemed like fun because you could set it up and then capitalize on it later. But when would the conveyor activate, and how far would it convey?&nbsp;We decided that it would start up only one turn after&nbsp;being placed, like the Bomb Arrow, and then attempt to move one square per turn. At first, they were set up to move every turn, but we wanted it to feel like they were on your team!&nbsp;</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-7.gif" title="First the push happens, then the arrows swap, then the conveyors try to push... right??"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-7.gif" title="conveyers"></a></p>
<p>First, the push happens, then the arrows swap, then the conveyors try to push… right??</p>
<p>This card led to lots of fun! Especially when a card that seemed out of the game&nbsp;suddenly&nbsp;moved into a new spot!&nbsp;We had struggled with the order of operations: if you had a dozen Conveyor cards moving all over the board, what order would they go in? This confused everyone on the team…and still does! Thank goodness for all those previews.<br />In retrospect, it would’ve been cool to have a Bomb Conveyor arrow! Alas, our setup did not allow for that. Maybe next time?</p>
<p><strong>Cascade Arrows</strong></p>
<p>Cascade Arrows were borne of the desire to turn an opponent’s card&nbsp;into one of your own.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-8.gif" title="In Triple Triad, a rule called &quot;Same&quot; lets you claim your opponent's card if the numbers on the sides match."><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-8.gif" title="same"></a></p>
<p>In Triple Triad, a rule called “Same” lets you claim your opponent’s card if the numbers on the sides match.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-9.gif" title="In Joustus, the card is flipped when you push it. The result? A cascade of changing card ownership!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-9.gif" title="cascade"></a></p>
<p>In Joustus, the card is flipped when you push it. The result? A cascade of changing card ownership!</p>
<p data-offset-key="5mqh-0-0">This complicated concept&nbsp;was made&nbsp;crystal clear by using imagery of a propeller flipping the cards over with its wind.&nbsp;This ability&nbsp;was deemed&nbsp;too powerful to use&nbsp;repeatedly&nbsp;(like a Bomb Arrow), so it&nbsp;was restricted&nbsp;to only work on the initial push. Cascade arrows turned out so great! It’s&nbsp;tremendously&nbsp;satisfying to flip over your opponents’ cards and achieve a Gem Sweep.</p>
<p data-offset-key="5lbfd-0-0"><strong>Countdown Arrows</strong></p>
<p data-offset-key="2ns4e-0-0">What’s better than a double arrow? A Triple Arrow!&nbsp;We wanted to have them, but they seemed like they’d be too overwhelming, not to mention a little predictable and boring.&nbsp;We altered Triple Arrows into Countdown Arrows- Arrows that would become less powerful over time.&nbsp;Initially, the design called for them to reduce from 3 to 2 to 1 to 0 arrows, but that was too complicated. The countdown was also too fast if it counted every turn, like Conveyer Arrows. We altered the countdown to be every other turn.&nbsp;That way your own arrows would expire on your turn, so you could deal with them yourself instead of it benefiting your opponent! Countdown arrows became an interesting gambit to use if you thought you could win in a few turns!</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-10.gif" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-10.gif" title="countdown"></a></p>
<p><strong>Slam Property</strong></p>
<p>It’s gratifying to clear a space on the board! Unfortunately, there&nbsp;weren’t&nbsp;many cards that allowed that. Slam cards arose from the idea of pushing a card away without your own card following after it. Originally, Slam cards were activated after one turn, like bombs! We decided that the ability wasn’t too overpowered and changed it to activate as soon as it was placed! The immediacy of Slam Cards makes them fun.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-11.gif" title="One note on being overpowered: the most overpowered card combination in the game is probably Bomb Arrow + Slam, because the bomb is armed and can destroy a card immediately!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-11.gif" title="slamProperty"></a></p>
<p>One note on being overpowered: the most overpowered card combination in the game is probably Bomb Arrow + Slam, because the bomb is armed and can destroy a card immediately!</p>
<p><strong>Gravewalker Property</strong></p>
<p>Players&nbsp;naturally&nbsp;want the power to subvert restrictive rules! That’s what Gravewalker cards do with the graveyard mechanic.&nbsp;This property was pretty straightforward to&nbsp;implement, simple to explain, and effective to use during matches.&nbsp;Great pains were taken to ensure that only cards featuring the dead or undead were given this property.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-5.png" title="Only the most appropriate cards were chosen to be Gravewalkers"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-5.png" title="gravewalkers"></a></p>
<p>Only the most appropriate cards were chosen to be Gravewalkers</p>
<p><strong>Switch Property</strong></p>
<p>Arrows switching around was a natural idea! So, Switching was implemented early on. It was difficult to categorize, but we settled on “Switching” being a property. It could apply to whatever arrows the card already had but what directions would it switch, and when!? We decided that it would switch every time it was pushed. As far as the directions, we eventually supported all horizontal and vertical movement. It seemed intuitive enough that players would understand them and their symbols. We initially discussed making rotating Switch cards where all the arrows would move clockwise or counterclockwise, but it seemed too complicated.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-12.gif" title="Whoa! Directional switch up!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-12.gif" title="switchie"></a></p>
<p>Whoa! Directional switch up!</p>
<p><strong>Pit Squares</strong></p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-13.gif" title="Pit squares are filled once a card falls in."><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-13.gif" title="pit"></a></p>
<p>Pit squares are filled once a card falls in.</p>
<p>Like rocks, Pits&nbsp;were meant&nbsp;as one of the board escalations introduced when you entered a new Card House. World 3’s Card House had ‘flying’ as a placeholder property, where the ‘flying’ cards would be able to&nbsp;fly&nbsp;over pits. Once we got to World 3, this idea seemed a bit too boring. Instead, pits evolved into a spot into which a card would fall (and fill) once pushed. As with&nbsp;being bombed, the card returns to your deck with no permanent damage incurred!</p>
<h2><strong>Making all Manner of Cards</strong></h2>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/cardInsanity.png" title="All of the card arrows and properties are contained in a dizzying spreadsheet!"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-6.png" title="cardInsanity"></a></p>
<p>All of the card arrows and properties are contained in a dizzying spreadsheet!</p>
<p>With all of the abilities and permutations collected, we whittled the possibilities down to a “close-to-final” final number of cards. In our spreadsheet, we decided who would and wouldn’t be made into a Joustus card. In the end, almost every character made the cut (excluding an enemy or two, and some village NPCs that did not appear in King of Cards. Variations of most common enemies like Wizzem and Goldarmor did not make the cut!).</p>
<p>Some rules were established for how the cards would be created and doled out:</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/regularFoil.png" title="Normal card on the left. Unique card on the right, indicated by the star and 'foil' sheen."><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-7.png" title="regularFoil"></a></p>
<p>Normal card on the left. Unique card on the right, indicated by the star and ‘foil’ sheen.</p>
<ul>
<li>Character cards would all be unique (only 1 Shovel Knight card!)</li>
<li>Character and enemy cards would be introduced at around the same time as their-in-game counterparts.</li>
<li>The abilities of the cards should roughly correspond to the character represented.</li>
<li>No repeats! No two cards should have the same exact arrow / ability combination.</li>
</ul>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-14.gif" rel="gallery1" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-14.gif" title="birderIrl"></a></p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-15.gif" rel="gallery1" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-15.gif" title="birderCard"></a></p>
<p>Here’s an example: Birder, an enemy in the game, moves diagonally and bounces at screen edges. In Joustus, Birder’s arrows are oriented diagonally and&nbsp;switch directions when pushed!</p>
<p>Getting this all right was an impossible juggling act. We couldn’t believe we figured it all out! There is one unique card we broke a rule to balance the game better…can you find it?</p>
<p><strong>Gem Sweep!</strong></p>
<p>In default Matches, there are 3 gems to claim, but what happens if you get all 3? Do you get something special? We (and many players) asked this question.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-16.gif" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-16.gif" title="gemSweep"></a></p>
<p>The answer was pretty straightforward! If you get a Gem Sweep and win by claiming all available gems, you would be allowed to choose a card for each claimed Gem! This required some menu rejiggering, but it was well worth it!</p>
<p><strong>Varying Board Sizes</strong></p>
<p data-offset-key="b790o-0-0">Joustus&nbsp;was conceived&nbsp;as a 3×3 grid with a 1-tile graveyard space.&nbsp;Experimentation showed us that other board sizes worked and added another layer of strategy as well!&nbsp;Removing graveyard squares around the edges of the board created a sense of claustrophobia. While making a larger board made the game take much longer (plus, you were able to see more of your deck.)</p>
<p data-offset-key="4i29p-0-0">We ended up supporting a variety of grid types, but leaned on the default versions more&nbsp;heavily.&nbsp;The boards were all made to be&nbsp;thematically&nbsp;appropriate, especially the boss battles aboard the airship. Some examples:</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/moleMinionBoard.png" rel="gallery2" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-8.png" title="moleMinionBoard"></a></p>
<ul>
<li>Mole Minion’s board is long, since he wields a long weapon.</li>
</ul>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/treasureBoard.png" rel="gallery2" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-9.png" title="treasureBoard"></a></p>
<ul>
<li>Greedy Treasure Knight has 5 gems on his small board.</li>
</ul>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/polarBoard.png" rel="gallery2" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-10.png" title="polarBoard"></a></p>
<ul>
<li>Polar Knight’s board is wide and dangerous along the bottom, just like the spike-lined floor in his boss battle.</li>
</ul>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/phantomStrikerBoard.png" rel="gallery2" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-11.png" title="phantomStrikerBoard"></a></p>
<ul>
<li>Phantom Striker’s board swaps the Graveyard’s position, forcing you to surround your foes in the Graveyard. Just like Phantom Striker!</li>
</ul>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/specterBoard.png" rel="gallery2" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-12.png" title="specterBoard"></a></p>
<ul>
<li>Specter Knight’s gems are also in the graveyard, forcing the player to&nbsp;dip a toe into undeath.</li>
</ul>
<p><strong>Cheating!</strong></p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-13.png" title="This cheater card mockup shows how they'd be &quot;hidden&quot; offscreen."><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-13.png" title="cheaterMockup"></a></p>
<p>This cheater card mockup shows how they’d be “hidden” offscreen.</p>
<p>We wanted to include cheating in Joustus since it seemed like King Knight would be a cheater! Plus, we wanted to have a way for players to bypass a situation in a clever way if they wanted. Chester would sell these cheats, of course. We came up with 3 cheats based on player wants:</p>
<ul>
<li><strong>Weakening the opponent’s deck</strong>&nbsp;– This became “Beeto Swap”, where your foe’s hands turn into&nbsp;weak Beeto cards.</li>
<li><strong>Claiming&nbsp;your opponent’s gems for yourself</strong>&nbsp;– This became “Gem Thief”, which flips your foe’s&nbsp;cards on a gem to become yours.</li>
<li><strong>Playing cards on the board without interference</strong>&nbsp;– This became “Play ’em all”, which lets you play 3 cards in a row.</li>
</ul>
<p>But how would they be activated? The answer was a fun one – they’d appear ‘hidden’ slightly offscreen… just like how you might hide an actual card up your sleeve. Cheats were made expensive to create a real decision point- should you try and build a deck for a moderate cost, or pony up the big bucks to cheat your way out? We’re proud that the cheats aren’t silver bullets- there have been plenty of times we’ve used a cheat and still lost!</p>
<p><strong>Millions of Menus</strong></p>
<p>With all of these complicated systems, cards, card abilities, and more, we needed a way for players to view this information at a glance and understand it! Before we could categorize the information, we had to determine&nbsp;exactly what details players might want to see.</p>
<p>We knew there would be pre-match menus to show players the rules of the match. As well as post-match menus to show what happened afterward. We tried cramming as much information onto these screens as possible – the cards and gold you earned, the reason the game ended, and all the options for what could happen next. Eventually, the majority of this information was streamlined and stripped away to avoid overwhelming the player.</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/preBattle.png" rel="gallery3" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-14.png" title="preBattle"></a></p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/youObtained.png" rel="gallery3" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-15.png" title="youObtained"></a></p>
<p data-offset-key="5mbud-0-0">We wanted there to be menus&nbsp;during&nbsp;the match to help inform the player on how to make their next move. A bar&nbsp;was created&nbsp;on the bottom to provide instant info. Additionally, hovering over a card displayed more info about the card&nbsp;specifically.</p>
<p data-offset-key="968u-0-0">There would also be a series of management menus so players could see and organize the cards they’d collected and their customized deck.&nbsp;We had big scrolling lists of cards, but it was impossible to compare your library to your hand on separate screens.&nbsp;To remedy this issue, we divided the screen into 2 panels. That way, you could see the library on one side and the deck on the other.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-16.png" rel="gallery4" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-16.png" title="cardEditing"></a><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/Library.png" rel="gallery4" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-17.png" title="Library"></a></p>
<p>The mockup on the left dedicated too much space to ‘card info’. We ended up going with the final version&nbsp;on the right that displayeded twice as many cards.&nbsp;More menus were conceived later on to help players build their decks:</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/deckInfo.png" rel="gallery5" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-18.png" title="deckInfo"></a></p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/filter.png" rel="gallery5" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-19.png" title="filter"></a></p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-20.png" rel="gallery5" title><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-20.png" title="cardInfo"></a></p>
<ul>
<li>An overview of your deck’s properties – deck info.&nbsp;We came up with the “Klax” visuals to help try and make it easier to visualize how many arrows of each type are in a deck.</li>
<li>A filter to further narrow down your library.</li>
<li>Card info would also be available here.</li>
</ul>
<p>It was a huge challenge to design the filters and info screens with so little screen real estate!</p>
<p><a href="https://yachtclubgames.com/wp-content/uploads/2019/10/klax.jpg" title="Hey anybody remember Klax? We referenced it in the article! ...Anyone?"><img alt src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-1.jpg" title="klax"></a></p>
<p>Hey anybody remember Klax? We referenced it in the article! …Anyone?</p>
<h2>Whoa, That’s a Giant Mini-Game!</h2>
<p>Fleshing out Joustus’ mechanics took a lot of thought and required&nbsp;several&nbsp;iterations. Every mechanical complication needed to be cohesive&nbsp;with the other parts, displayed onscreen,&nbsp;and easily communicated to the player!</p>
<p>That’s only for the self-contained game of Joustus! We haven’t even talked about how Joustus&nbsp;was integrated into the rest of King of Cards! In the 3rd and final article, we’ll talk about creating the vast metagame behind Joustus!</p>
</p></div>
<hr>
<div class="hide-phone">
<h3>Related Jobs</h3>
<div class="stories_item">
<div class="thumb"><a href="https://jobs.gamasutra.com/job/senior-mobile-game-developer-c-forge-of-empires-hamburg-34704"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-21.png" alt="innogames" width="120"></a></div>
</p></div>
<div class="stories_item">
<div class="thumb"><a href="https://jobs.gamasutra.com/job/senior-lead-engineer-boston-massachusetts-34701"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-2.jpg" alt="Crate Entertainment" width="120"></a></div>
</p></div>
<div class="stories_item">
<div class="thumb"><a href="https://jobs.gamasutra.com/job/senior-camera-programmer-bellevue-washington-34616"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-3.jpg" alt="Sucker Punch Productions" width="120"></a></div>
</p></div>
<div class="stories_item">
<div class="thumb"><a href="https://jobs.gamasutra.com/job/programmer-bellevue-washington-34615"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-3.jpg" alt="Sucker Punch Productions" width="120"></a></div>
<div class="title"> <strong> Sucker Punch Productions — Bellevue, Washington, United States <br />[12.07.20] </strong> <br /><a href="https://jobs.gamasutra.com/job/programmer-bellevue-washington-34615">Programmer</a> </div>
</p></div>
</p></div>
<hr></div>
<p> <!-- InstanceEndEditable --> </div>
<p><!--end contentbox-->
</div>
<p><!--end span-16--> </div>
<p> <br class="clear"> </div>
<p><!--end span-21--> <!--begin right sidebar--> <!--end right sidebar--> &lt;!– </div>
<p> Extra Div –&gt; <!-- Beginning Sync AdSlot 21 for Ad unit Gamasutra//independentgames ### size: [[8,2]] --> <!-- End AdSlot 21 --> <!-- Beginning Sync AdSlot 22 for Ad unit Gamasutra//independentgames ### size: [[8,4]] --> <!-- End AdSlot 22 --> <!-- Beginning Sync AdSlot 23 for Ad unit Gamasutra//independentgames ### size: [[4,4]] --> <!-- End AdSlot 23 --> <br class="clear"></p></div>
<p><!--end content-body-wrapper--> </div>
<p><!--end container--><br />
<!--begin footer--> <!--end footer--> <!-- SiteCatalyst code version: H.21.
Copyright 1996-2010 Adobe, Inc. All Rights Reserved
More info available at http://www.omniture.com --> <a href="http://www.omniture.com" title="Web Analytics"><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/12/a-deep-dive-into-the-making-of-king-of-cards-joustus-mini-game-17.gif" height="1" width="1" border="0" alt></a><!--/DO NOT REMOVE/--><br />
<!-- End SiteCatalyst code version: H.21. --> <!-- Begin ADSNATIVE Code --> <!-- End ADSNATIVE Code --> <!--Begin Ad script for pixel --> <!--END Ad script for pixel --> </p>
</div>


https://www.sickgaming.net/blog/2020/12/...mini-game/
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016