CAMBIO: EXTINCTION RUN

 

PLAY THE ALPHA GAME! Password: aurafarm

https://suikami.itch.io/cambio

WEEK SEVEN: INVENTORY

The inventory is where players can choose their own card back skins through achievements or from the store. But to make the inventory more appealing, I wanted to create a carousel mechanic. That way, players will be scrolling through their skins for easier access.

Before programming the carousel mechanic, I created a concept of what it would look like. The original design was that players can scroll through their card skins with details explaining what kind of skins they are on the bottom. 

Once the player click on a certain card for a closer look, the card would slides to the top while the rest of the cards slide down. The details would also be added to the side of the card instead of the bottom as well. However, as I started working on the mechanic, the concept began to change.

Just like the menu, I tween the cards so they could be scaled and slide. I first created five card GameObjects as a temporary solution. To ensure that they are in the appropriate position, I set up a function where as soon as the game starts, the cards will not only spread across the screen, but also scaled down while the current card the player is on, is scaled slightly up. 

Now to control the mechanic, I used the scroll mouse wheel so players can scroll through their collection, rather than using the arrow keys. However once I added the control and tested it, the scrolling was too sensitive. This caused the scrolling to speed up. To stop this, I added a coroutine when the players scroll once, there is a short cooldown and the player can continue scrolling without noticing the cooldown.

After I got the controls to work, I moved on to work on selecting and deselecting the cards. I first created two equip buttons: one for the starter inventory and one when the card is scaled. I also add a detail panel once the card is selected. I created a function where once the current card is selected, not only does the card moves closer, but the first equip button would swipe off the screen and the second equip button and detail panel would appear. Meanwhile the rest of the cards move down. For deselecting the cards, I have the tween animations played backwards and update the card positions back in their original positions. 

The inventory was very challenging as it was my first time to make a carousel mechanic. However this also helped me understand arrays a lot more. Before working on the shop, I wanted to start designing the Inventory scene. 

WEEK SIX: UPDATING THE MENU

Now that I have the design of the title, I knew what kind of art style this game would be. Before I can make some changes to the layout of the menu, I designed both the top three buttons and the bottom four. 

To make the top buttons more unique, I decided to create different icons for each buttons. The Play Button would be a T-Rex skull, the Inventory Button would be a deck of cards, and the Store Button would be a building made out of a boulder. While the designs are an improvement, I want them to not just be a still image. 

So now they each interact in certain way when you hover over the buttons. The T-Rex skull can now open its mouth when you hover over. The deck of cards would spread out and the store's door would open. Because I used Sprite Swap in order to switch out different sprites, there was no way of knowing whether or not you clicked the button or not. What I did was I resize the buttons and change the brightness from my drawing software and import the pressed buttons into Unity.

Instead of just texts, I just drawn simple icons. The person icon stands for profile, the gear stands for settings and the "i" stands for credits. I even added a new button for the Exit. Based off of a public Exit Sign, instead of a human, a dinosaur would replace it. Once the buttons are finished, I moved on to the final task: the panels. 

Had a hard time figuring out what the panels should look like until I came up with the idea of  fossilized amber. For both the profile and credits panels, I reused both the T-Rex skull and the card from the title to fit inside of the amber to make it more appealing. I also designed the volume sliders as well, similar to the buttons I made it rock-like as well as having the volume buttons to be bones. Originally the panels would appear in different directions. Not only did I have them all appear from one direction, but I designed ropes to make it look like the panels are supported.

The updated menu now has three interactable buttons with four functional buttons. The panels are now redesigned with better animated movements. Despite the lack of background, the menu was complete. My next focus would be the inventory where players can equip different card back skins. 

WEEK FIVE: DESIGNING THE TITLE

While it is strange to focus on the art first before moving to working on other scenes like the inventory and the store, I felt this was a good motivation for me and my team in order to get this game more done quickly. And because of us working on this game for the past few months, I thought it is best to show the players what this game's aesthetic is. 

In order to grab the players' attention towards our game, I wanted to start by designing the title. I based the design off of the title of a show called, Dinosaurs. 

Using it for inspirations, I have a pre-made, copyright free font to draw over to make the word CAMBIO, excluding the O. I used the O instead to create the egg. But in order for the players to know what this game is about, I added a Spade of Ace card inside of the egg. However, upon finishing the first draft. I realized that the egg doesn't really convey the O really well. 

I redesigned the egg again and this time it was a cracked egg from the center. Not only that, I have the backends of the letters to be black similar to old comic books. I had my team look over to see what can be done and they had some feedbacks. They suggested to have an eyeball cracked through the egg. While it was a good idea, I wasn't too happy about it as I felt it was too generic. Instead I found a better solution. 

I decided to create a new cracked hole of the egg and drew a dinosaur hand. Not only did I reuse the card from the first draft, but had the baby dinosaur holding it as well. Once the title was done, I went on to create the subtitle underneath it. 

To make Extinction Run look more exciting, I decided to draw the subtitle based off of volcanoes. I started off by creating a silhouette of merged volcanoes. Not only did I reuse the same font, but I also break the words down to make them look like craters. Once I finish, I added lava for the effect. I then added detail onto the background as well as rendering them to look like volcanoes. Similar to what I did to the main title, I added a 3D effect for the subtitle. 

While the title looked exactly what I wanted to look there was only one issue. The title gives off a spooky vibe rather than a fun game. This was due to the uses of black color as well as the darker color from the letters and the egg. Luckily I still have the previous 3D design of the first draft, reused it, and darkened just a bit so the letters stand out. I then updated the egg more brighter but still closely resemble the color of the letters so it can be readable. I finally then ditched the 3D effect for the subtitle and added colored outlines around the title.  

I am really proud of this design as it conveys what the game is about as well as giving off that it is a fun game to play. Because of the details I added onto the title, I use the same technique when working on the menu. 

WEEK FOUR: EARLY MENU

The menu is where I experiment tween animations the most and this was around the time where the team shift focus from mobile to PC instead. We thought it was best to have more simple and cleaner code for the game before transferring to mobile. Because of this, I created a menu screen that could fit into the aspect ratio for the PC. Of course you have the play button to start the game. But I also added an inventory and store buttons. Store will be where you can buy card skins, specifically the back of the card, while Inventory will be where you can select any card skins and equip them. Below would be the profile, setting and credit buttons. Profile would be where you can keep track of how many wins and losses as well as many matches you played. As of right now, the settings of the game would be just for volume. 

Originally the credit and setting buttons would lead to different scenes, but I thought it is best for the bottom buttons to have panels for simple accessibility. I then created three temporary panels for each of the bottom buttons. After that, I added tween animations for the panels. When clicked on the profile, the panel would appear from the top, while the setting panel would appear from the side. The credit button would appear on the bottom  as well.

This was my first attempt playing around with the three volume settings. Master volume for both music and sound effects, Music to decrease or increase, and sound effects to decrease or increase as well. This was my first time working with the volume sliders and ran into a problem easily. When I attempt to set the volume in the game, the numbers would lined up out of the panel as you can see from the gif. However that was due to me overlooking the code and accidentally mislabeled it. 

From this point on, because the programmers are focusing on the gameplay, I decided to focus on improving the menu, which include designing the graphic design and the title for our game. 

WEEK THREE: GAMEPLAY MECHANICS

Tween animation were what I used to for the rest of the UI, especially when the game begins, the cards would be drawn from the deck and be placed onto their designated slots face down. While I was working on the main controls of the game, the programmers have worked on programming the start of the game where the cards must be shuffle before moving to each players' board. While they manage to successfully script it, they left the card prefabs to be scripted to me.

In Cambio, cards that are labeled from 6 to King have different abilities that players can use to either swap or look at their opponent's cards. So I first did a long process of labeling each cards so the script could specifically call one of the cards to activate an ability. Once that was done, I ran into an IEnumerator one of the programmers made called InitializeBoards. This was supposed to draw the cards from the deck and onto each of the boards on the table once the game start and the cards are shuffled. However, there was only a print function. So what I did is I created two GameObject variables with a table. One variable for the player board and one for the enemy board. Each boards have four slots for the card to place and because there are four slots, I added the numbers in table for the variables. I also added more GameObject variables to include the card areas from the hierarchy. Now that the variables were set up, I moved to the next function, drawCardAtHand.

According to the function, this is supposed to be where the drawing happens and when it does, it draws from the top card from the deck. But like before, there were only print functions. I first set up GameOject variable in the function which valued a List GameObject called deck. This was where the drawing the top card came from and because the value in the table is 0, it's the first card the function would take. I created another GameObject variable called card to instantiate a card from where the deck should be while faced down. Now this is where Tween comes in.

To make the cards move from the draw pile to each card slots, I first set the parents of the cards to the slots where they must go. Using Tween, I have them moved to the same position as the slots, made the float value be 0.5, and set the ease, OutCubic. The cards should ease by accelerating from the beginning but decrease once they reached their designated slots. 

This mechanic was something that I'm proud of as this was the first time I ever done and wanted to practice this for the menu itself. 

WEEK TWO: EARLY BUILD

We have worked on a concept art of what our game could look like as well as adding abilities, events and debuffs for the game. Originally this was planned as a mobile game for the IOS hence the aspect ratio. Once the concept was settled, I was able to translate them into Unity. 

In Cambio, players would be given four cards each from the deck and must be faced down except for the bottom two cards to be memorized before they too turned face down. While one of the programmers worked on getting the cards to be shuffled and be placed onto each player boards, I planned to work on getting those cards to not only to be moved to their designated spots, but also have it possible for them to be flipped. 

I first downloaded a preexisting card pack and implement them into unity as sprites. I then created four empty GameObjects to be used as places where the cards can be placed in. Once that was done, I created a script where you can drag and drop the cards. I start by adding a collider for the card just so it would be interactable when touched as well as adding a Vector3 variable so I'd be able to move the cards themselves. I then added three functions: OnMouseDown, when the mouse clicks on the cards, OnMouseDrags, when the mouse drags them, and OnMouseUp, when the mouse lets go. I also created a separate script for those four empty GameObjects so that when a card is hover over them and let go, it would be automatically be placed on one of them. 

Once I was done with the card movements and placements, I start creating a flip script so that the cards are able to be flipped. For this I used one of the Unity Plugins called Tween. That way the card would be animated. In the script, I added a coroutine where every time I press space, the card would flip and if I press space again, it would flip back the way it was before. However, one issue I ran into was that I was using a single sprite for the card. So even if I do flip the card itself, the back will not be visible. To solve this, not only do I add a second sprite to the card, but turned it into a prefab so that is more easier. 

Using Tween was just the beginning for me. As I went on working on the game, I had been using Tween for almost the rest of development. 

WEEK ONE: INTRODUCTION

For the past few months I had been working with an indie team to create a card game based off an existing multiplayer game called Cambio. The goal of the game is to get the lowest total score by discarding, swapping, and peeking through each other's cards.  To make this more appealing to players who never heard of the game and to a more wider audience, we intended to make the game with a dinosaur motif. 

The team is made up of five people. Our creator and producer is Kaiswe Truong who also recruited us to help make the game. As for the programmers there are Joshua Tanaka, Nicholas Ngyuen, and myself. I also took part in helping with the art design with the help of Mira Chen Lin.

At this time, we are still working on this game so for the next weeks I plan to write down our progress into developing this game.