Changing Text Color and Updating the Shopping List

Yay! I had my collectables, my randomly generated shopping list, and my working raycast directed projectile. But I needed to keep track of items in the cart and compare them to the shopping list, then ultimately communicate that to the player through UI.

I thought it would be easy...

Ultimately, I would love the shopping list to be a piece of notebook paper with hand-written text. Each time you find something, it should "scratch" that item off the list. (Of course, my modern shopping experience is that I make shopping lists on my Phone and click a box to mark it off...hmmm...something to consider.) But for now, I just wanted the text to change color (to green) when the correct item fell into the cart.

Changing the font color was overly complicated. That's because I have two different scripts, one managing the shopping list and the other reading what items are in the cart. So I have to use .GetComponent<> quite often to reference lists, objects, properties, and call functions. Maybe I'll combine the two scripts to make things simpler.

But for now...

PSEUDO CODE!:

-When a GAME OBJECT enters the shopping cart box trigger:
   -Check if that GAME OBJECT is tagged as a "Product".
       -If yes:
               -Get items script with properties
               -Get item's "cost" property from that script.
               -Add that GAME OBJECT to the list "Items in the Cart"
               -Add that GAME OBJECT to the list "Items in Basket"
               -Update List
               -Update Cost
        
In actual code:

Update list is actually in another script. It's what I'm using to check whether or not the player has found an item on their shipping list. If what is in the cart matches what's on the list, it changes the font color to green. Because I was hopping between scripts so much, I got confused at first and was trying to change the font color of a GameObject instead of a UI Text Object. 

...I'm smarter now...

Here's the list updating in action!

 

I just want to say that this little demonstration, as simple and mundane as it may appear, was a rough week for me!

Firstly, I had a problem with the UI text disappearing. To make text change colors, I was creating a Public Color variable and setting the color in the editor. But when I ran the script, my text disappeared! All the code in Visual Studio showed no syntax errors and Unity showed no compiling errors...I just couldn't understand.

Then I found that all Color elements have an Alpha Layer Property (Transparency), and for some reason its default is 100% transparent. So when I turned it 100% opaque--guess what, there was my text!

But then I ran into another problem. My script was written so that when an object fell into the shopping cart, a function compared all items in the car to all items on the list. If a match was found, then the relevant UI element turned green (as demonstrated). But they wouldn't change back again once the object was removed.

I tried a few variations of if-else statements, but I kept running into the problem of turning all the text back to black.

I'll try to explain my mistake with pseudo code:

When Update List is Called--
   Cycle through each item on the shopping list
       For each item in the shopping cart, compare its Name to that of the current Shopping list item.
           If they match, turn its text to green.
           If they don't match, turn its text to black.

I was trying to turn the text black when an object fell out of the cart--but instead, it turned everything black. That's because when I checked for a Red item against a Red item, it turned the "Red" font green. But then it moved to the next object (let's say blue), and would check that blue object against the red. When it didn't match it would turn the "Red" font back to black.

After a few days and no immediately answers on Unity's forums, I ended up creating a Bool called "nowGreen". For each item in the list, I set the nowGreen to false. As the function checks each item, there's an else-if statement that only runs if nowGreen is false, which turns the text black. If the items match, it turns the font green and changes nowGreen to True--which prevents the line of code turning the font black from ever running.

So far it's worked well so far!

My next post should be a little shorter. It's about how we do a clean up on aisle 7. I'll explain how I finally received some amazing help on the Unity forums, as well as, realized my game is too easy!

If you made it this far, how about leaving a comment so I know you were here?

Generating a Shopping List

(Before I get started: there is some code from the game at the bottom, for those interested in reviewing and providing feedback!)

So with a my First-Person Controller and Projectile working...ahem...perfectly...hack (*sorry, fibbing dries out my throat), it was time to generate a shopping list for my FPS shopping simulator. It didn't go as smoothly as I anticipated.

A colleague is currently in school for video game development and wants to focus on UI. I asked if she would like to help on the shopping list element (which I would like to be much fancier than what I accomplished), until she can beef it up--I just wanted it working.

I decided to give the player 8 items to find.

...You know...because...

And I thought for replay, the items should be random. So I needed:
1. The Game needs to pick 8 items at random from a pool.
2. Generate a UI list on screen of those 8 randomly chosen items.
3. Calculate a budget for the player.
4. Keep tabs of the total cost of all items in the shopping cart and track whether we're staying in budget.

Look at all those items on the shelves!

Public Variables -- AMAZING!

I started by first creating 16 items. Until art is available, I made them solid colored cereal box sized objects and named them after their individual colors.



I then created a simple script to hold properties for each object so that I could utilize them within scripts. I think the properties are pretty self explanatory, unless you've never worked retail--then Sku might be confusing. It's usually just a number (different from the UPC) that represents the product within the retailer's database.

Such shopping carts

I forgot to mention. I also made a shopping cart. It's just sprites and invisible collision boxes. I also put a trigger box inside the cart to keep track of what items where falling inside of it. So it's on this trigger box that I decided to create my list.




To Generate my shopping list I created a list and placed every single shopping item's prefab into it, and then I created another list that would eventually become my shopping list. I used a For Loop to randomly pick 8 elements from my product pool and added them to my shopping list. I had to use .remove to take the chosen items out of the first list so they would not be accidentally chosen twice. I then set each item chosen to a UI Text object. It worked pretty flawlessly!

 Here's a brief sample of the script I used to create the list. You'll also see that I calculate a budget for the player. After the objects are chosen, I cycle through them and get all their prices. I add those prices up and multiply them by 1.10 to make the budget 110% of the cost of all the required; which can be adjusted if needed.

FPS -- First-Person Controller and Raycasting Woes

So, this project is a first-person shooter/grocery shopping sim. The player must explore a store, seek out listed items, and then shoot them off the shelves into their shopping cart. Obviously, the first thing I needed was a FPS controller and a form of shooting.

Raycasting is the way I went.

I struggled with getting the racycast/shooting to work as I'd like it. Not 100% satisfied, but it's functional enough to keep moving.

Unity comes with its own First-Person controller, but, for the sake of learning and practicing, I followed an online tutorial on creating a FPS controller from scratch. It's not as robust as the Unity provided option, but it still does more than I need for this Project.

Pretty sure this is the video I used:

According to the many videos I watched, FPS games do not have traveling bullets. Instead, a line/ray is shot/cast out from the camera until it connects with an object/collider: raycasting. The point where the ray makes contact will receive bullet damage instantly. I know games like Battlefield somehow account for bullet travel and bullet drop, but I couldn't find a clear answer on how to get this to cooperate with raycasting.

I did want projectile travel time and not the instant contact that raycasting provides. I'm not 100% sure why I insist on this, but my gut says it's the right path to follow. If testing proves otherwise, I'll happily change it.

Within the tutorial (which I followed on Unity's website) they have a ray cast from the camera. This ensures a centered hit. Then, a second ray is cast form the gun-muzzle to the exact hit point. I'm not going to mess up my code to show the errors I ran into with this--but I will bore you with great detail in text :D.

Firstly, once I had followed all tutorials to perfection(ish), I began to play around--firing pink lasers (raycasts) from gun-muzzle to centered contact-point. But then, seemingly random, the laser would fire backwards. I couldn't understand it. I adjusted code so that the laser did not disappear once fired and discovered that it didn't just fire backwards, but it was firing at my player-avatar's head!

Since I didn't want instant hits from raycasting, but rather a traveling object, I decided I would disable the raycast to avoid shooting myself. But then I noticed another problem, my trageting was no longer centered, it was off-center. This is the obvious result of the muzzle being off-centered (per classic FPS style) and the projectile instantiating from that point. But sadly, it also meant I couldn't bypass the suicide-feature inherit in my raycasting.

After weeks of frustration and refusal to open the project, I found my answer. I don't know if this was mentioned in any of the tutorials I watched and I just didn't catch it (as I tend to work as I listen/watch), but you can actually set layers for objects to not receive raycasting hits. I simply put the player avatar on this layer and now I never shoot myself in the head!

It's not perfect for Battlefield but it'll work for an FPS Shopping Simulator.

*You'll see a red-sphere appear against the wall. This sphere is instantiated by the raycast. You will then see a grey sphere travel from the gun-muzzle to the location of the red sphere. This grey sphere is the projectile that actually interacts with objects in the project.

Working on my new FPS!

I've been working on a new project for a few months now. A variety of things, such as fatigue, children, vacation, depression, Sea of Thieves, and Jessica Jones Season 2 have interfered with my productivity--but I'm feeling particularly motivated now!

I will being make a series of rapid fire posts to catch up on the story behind this game's development, but that will likely slow to crawl as I try to work my way through scripting hell.

To start things off, I'd like to share the game document I made for the project. It's, uh...three pages. At FIEA, 10 pages was considered a good length, but considering that those assignments were limited by only our imaginations, it was easier to hit the 10 page mark. This project is much smaller, and thus, requires less explanation.

Besides, one of my other Professors proclaimed that Rapid Prototypes were better than game design documents--so that's what I've focused on!

OVERVIEW: FPS is a first-person shooter about a character so obsessed with shooting games that their light-gun melds to their hand and becomes an actual projectile weapon. Their mother then sends them on a mission to buy groceries from the local shop.  Only using their non-lethal gun, they must collect the required groceries without going over budget.

GOAL: Use the gun to shoot listed grocery items into a shopping cart then take those items to the checkout.

PROJECT GOAL: Create a quirky shooting experience that plays well on the mobile platform, entertains, and subtly inspires some thought about the simplicity of shooting games.

TONE/THEMES: FPS is quirky game of silliness. The intent (beyond just being fun) is to encourage the player to think about the limitations of shooting games and the narrow experiences they provide.

AUDIENCE: Casual gamers with a cell phone looking for a quick, quirky experience. Public playtesting will allow for better audience identification.

ART DIRECTION: The project will take inspiration from Playstation 1 classics, like Parappa the Rapper, with low resolution sprites and brightly colored environments. (Or something else if testers hate it.)

STORY

Pixelated graphics: A metal door opens, revealing a corridor with plain concrete walls.

We are in control.

On screen, we see a 2D hand holding a pistol, our pistol. We move forward and are confronted by monsters from hell. Very reminiscent of the original Doom.

We shoot the monsters as they come. They explode, but still more come. No matter where we go, there are more halls, more corners, more doors, and more monsters.

As we play, the camera begins to pull back. The graphics are now three dimensional and brightly colored, à la Parappa the Rapper. We are in a living room playing our game on a TV.

Pulling back all the way, we are now in the eyes of our Avatar, and the pixelated 2D hand holding a pistol is now substituted by a 3D hand holding a plastic light-gun in our screen view.

Suddenly, the gun begins to glow and after a quick flash of light, the gun is now melded with our arm. And it no longer just shoots light at the tv, but fires plasmatic orbs of force.

An irritated voice calls from upstairs--ordering us to fetch the grocery list from the kitchen and take the money along with it.

We rush to the kitchen, grab the list, and then leave the house.

At the grocery store, shoppers are irritated by our menacing presence. Store employees are constantly complaining about the mess we make as we try to shoot grocery items into our shopping cart.

After collecting our necessary items, we make our way to front register. There, our items are totalled and the clerk asks for the payment.

With a familiar flash, the gun suddenly morphs back into a toy and drops to the ground.

Fade to black.

GAMEPLAY:

MOVEMENT
Played like most FPS: the player controls movement with the left thumb while turning and aiming with the right. For mobile touchscreen devices, the left half of the screen will detect movement while the right half detects turning and tilting (*player may invert this in options).

SHOOTING
The player fires their gun by tapping the right side of the screen. This is also the side that controls aiming. To differentiate between aiming and shooting, we must detect how long the player’s thumb is held and whether or not it glides across the screen (implying turning/tilting).

THE GUN
The gun melded to the player’s hand is the player’s primary form of interacting with the world.  It shoots “plasma spheres” that strike objects with a physical force--about equal to that of a tennis ball launched from a CO2 cannon.  Smaller objects like a box of noodles can be launched into the air while larger objects like people will simply be annoyed.

GROCERY LIST
The player will be presented with a randomly generated shopping list at the beginning of the level.  Aesthetically, it should appear handwritten on notebook paper and each item should be crossed out once collected. At the bottom of the list is a total of items collected.

The list can be hidden and accessed by sliding it up and down with one’s finger like a cell-phone menu.

SHOPPING CART
To satisfy the grocery list, the player will need to shoot items into their designated shopping cart. The cart can be pushed around or shot.

CASH & COSTS
The player is given a set amount of cash at the beginning of the game and they must collect all the necessary items on their grocery list.  If the total cost of items collected is higher than the cash the player has--they cannot complete the level.

NPC INTERACTION
NPCs will be shopping as well.  If the player agitates them by shooting them, hitting them with items, or bumping into their carts--they may kick the player’s cart and eject the items.

SCORE
A scoring system could be introduced to give added replay and challenge.

Rundead Android Trailer