Unity Tutorial: Scrolling Ticker Text

As I work more and more with Unity, I've begun to learn tricks and tools that I'm guessing would probably be useful to others as well. In my most recent game, Bubble Market, I created a scrolling ticker text box at the bottom of the screen to display active events which were effecting the game at any given point in time. This kind of scrolling text is useful as a general UI element, so I made sure to keep the script generic enough to be re-used. It also occurred to me that these sort of tools may be useful to others as well, so I thought I'd write a quick post explaining what I did, how I did it, and providing the script as an example.

Step 1: Scissoring

The first thing you need to create a scrolling ticker text object is a graphical effect known as scissoring.

Scissoring: In computer graphics, the deleting of any parts of an image which fall outside of a window that has been sized and laid over the original image. Also called "clipping."

There are some more advanced ways to create this effect in Unity, but I went with the easiest route: using a separate camera to render the scissored object. If your scene has a lot of scissoring with different areas going on, I'd suggest looking into other methods, but for simple and limited applications, the camera method works just fine.

To apply this technique, first set up your object without scissoring enabled. Make sure it's large enough that it is easily evident whether your scissoring is working or not. For my example, I used a long test string in my ticker text mesh:

Before we set up the camera, you'll need to change the layer this object is set to. In the upper right of the object's inspector window, click the Layers drop-down and choose to create a new layer. Call it something like "ClippedObjects". Set your ticker object to the new layer.

Now, in your scene hierarchy, duplicate your main camera. Call the new camera something like "Clipping Camera". Make sure these two cameras are in exactly the same place in the game world. You'll need to make several important modifications to the cameras:

• Clear Flags: On the Clipping Camera, change clear flags to "Don't Clear".
• Culling Mask: On the Clipping Camera, change the Culling Mask to only have ClippedObjects (our new layer) selected. You'll also need to modify the Main Camera's Culling Mask, so that ClippedObjects is NOT selected. This will make our new camera only render this layer, and our old camera ignore it.
• Viewport Rect: This is the actual rectangle where the clipping will take place. On the Clipping Camera, define it to whatever you like. You should be able to see the camera's bounds in the scene, and the effect in the camera preview and Game panel.
• Depth: Make sure the depth of the Clipping Camera is higher (more positive) than the depth of the Main Camera. This will ensure the Clipping Camera is drawn AFTER the Main Camera, which is what we want.

If you run the game, your object should now be clipped based on the Viewport Rect you set on your new camera.

Step 2: Scrolling

This was the first part of the effect I was after, a ticker text where the text disappears as it scrolls to the side. Now for the scrolling itself.

The actual scrolling is just a simple change to the object's transform each frame, I won't bore you with that. The interesting bit was figuring out when the object was no longer visible, and figuring out exactly how far to the right to place it so it can start scrolling again.

While I could have simply used the renderer's isVisible property to tell if it was off screen, this wouldn't have been enough for the second part of the scrolling: moving it back to the other side of the screen. Instead, I decided to use the renderer's bound property, which measures the bounds of the object in world coordinates. I set up minimum and maximum x limits for the visible range of the object, which correspond to the viewport I set up in Step 1. I saved these limits as data members in the script.

With this set up, I can easily tell when the object has moved off screen to the left by comparing the renderer bounds of the object to my saved x limit:

ResetScroller() is a method which moves the scrolling text to the right, just off screen and ready to start scrolling again. We determine where to place this text in the same way that we determined when it was off screen: using our scissor limits and the object's renderer bounds:

This first calculates the width of the object in world space, then edits the object's x coordinate to be the maximum plus half it's width. This is because my text object is centre aligned - however, if your text is aligned left, you won't need this step.

If you create a simple script and apply the method described above, you should see something like this:

Further Modifications

What I described above will get a basic scrolling text functionality in place. However, what if you want to change the text? What if something tries to change the text mid-scroll? Currently, the text will change right there, somewhat ruining the effect. For my scroller, I designed a queue system which accepts new messages and switches to the next message while the text is off screen, or repeats the last message a specified number of times (or infinitely). I'm sure there's a lot more functionality you could add to the system even beyond that.

If you'd like to see the finished product, I've made the script available as a gist. Feel free to use it directly or as a model for your own creations.

What interest text systems have you added to your Unity programs? Please share if you implement the ticker text system in your game - I'd love to see this tutorial being put to good use.

Thanks for reading! 

Pollinator, Flower Defence: Post-Project Reflection

It's been too long since I talked about my game for the Abertay Game Development Society: Pollinator, Flower Defence. The game was in a demo-able state for the last month and a half, seeing as we brought a build to the GDS showcase at the end of April. However, it wasn't running properly outside of the editor - we were having huge problems with the animated sprites scaling to gigantic proportions.

I'm glad to say this has now been fixed (albeit with a slightly hacky fix) and we now have a web version of the game available for everyone to try out! The game is located on my dropbox for now, since it's still just a prototype. If we continue work on it, we may try hosting it somewhere more permanent.

The Premise

For those who haven't been following this project: Pollinator, Flower Defence is a tower defence game in which you play as a group of bees defending their hive from attacking ants and beetles. It twists the genre slightly since you can freely move your bees from flower to flower - however they cannot attack while being moved and do not generate pollen or seeds while being moved. Additionally, players can build two separate "parts" for each tower - the flower (blocks movement, provides place for bee) and the bee itself (attacks, can be moved between flowers, generates resources from flower).

Difficulties

Developing this game was not without it's problems. First was simply the lack of time to devote to the project. We had a very small team (one programmer, one designer, one artist) and we all had our other coursework to work on. Additionally, two of the team members were going through Dare applications as well. Because of this, many of our grand plans couldn't be implemented - but luckily we recognized this from the very beginning and planned for modular development where we started with a minimum playable game and added more features time permitting.

On the technical side of things, I had more trouble than I was expecting using the Orthello 2D framework. It does everything I needed it to do, but sometimes it doesn't do it in the most intuitive fashion. We also had some serious issues with it's animated sprites resizing themselves to giants, which ultimately was fixed using rather hacky Update() size changes - not my best work, but a quick and dirty fix that did the job.

Design wise, the project did suffer from the lack of additional features. The two resource design (pollen and seeds) would have been interesting if there were more things to spend said resources on. As it is, it's actually quite boring because basically you just want to spend all your resources as fast as possible and there's no interesting choices between building flowers vs. building bees since their resources are de-coupled. The seed/pollen mechanic may also have been more fun if we'd gotten in the pollination feature - bees would carry pollen between flowers when moved, and only then produce seeds (or increase rate of production, at least).

There are also a few informational parts of the game we just didn't have time for, such as a how to play screen or tutorial, prices for the bees/flowers, and a credits screen. These are fairly easy to make and may be added in the near future.

Future Plans

Ultimately, this was a great initial project for the team. While we do hope to come back to the game and improve it (I really love a lot of the mechanics and interesting enemies Roy had designed that didn't make it in), I'm not really sure we'll have time for this. I have so many awesome projects in the pipeline now that this may be the last we see of Pollinator. This game will always have a special place in my heart because its first incarnation was the first video game I ever created. But I think it may be time to close this chapter and look forward to new and exciting things.

If any updates do make it in, I'll definitely write about them here! For now, farewell my buzzy bees. It was great fun!

You can play Pollinator, Flower Defence here: https://dl.dropboxusercontent.com/u/11838203/Pollinator/Portfolio_Web.html

Pollinator, Flower Defense - Hex Grid and Pollen Generation

I haven't posted anything here since my last update on my Pollinator project, and it's already that time again! I guess things have been pretty crazy around here, what with interviews, university group project work, and the beginnings of coursework. But I at least managed some time to work on our GDS game, and I'm pleased to report on the results.

Hex Grid Generation

Until now, we've been using a drawn on hex grid. That was fine, to an extent, but it meant we had no way to know if an object was on a hex and to snap it to the center of that hex. That clearly had to change, so I went about coding a hex grid generation algorithm. That in itself wasn't so bad - the more interesting issue was getting these hexes to generate in the editor rather than at run time, so that our designer could edit the level layout.

Luckily for me, Unity makes this really easy. I simply added a button to the editor menu to generate the hex grid.

In the future, I need to add a function that will drop any flowers placed on to the hex they are on, and the same for dropping bees onto flowers.

Pollen Generation

Last week I started the Pollen system by adding a UI display, but didn't get farther than that. This week, I added bee generation of pollen, which is displayed in said UI. Bees also stop producing pollen while being dragged, as intended.

Level Design

This week, our designer began work in earnest on our level layouts and spawn orders. Here's a look at one of the layouts:

Pollinator, Flower Defense - Enemy Spawning and Bee Movement

It's time for my weekly update on my Game Development Society game, Pollinator! I missed last week's update due to having nothing to report - Building Breakout took up all my time that week. Luckily I had some more time this week, and was able to complete two major features in the game.

Enemy Spawning

The first new feature I created was the enemy spawner. This object is responsible for creating the enemies which will then move toward the hive and perform any of their other behaviours. It's very simple for the designer to specify what enemies he wants: just type them in as a string, separated by semicolon. So to create a string of three ants, all at level 1, with a 2 second time between them, you'd simply specify:

"worker_ant,1,2;worker_ant,1,2;worker_ant,1,2"

I may add something in the future to allow a command to be repeated x number of times - this would make it easier to specifies large waves of the same enemy at the same level and interval. But for now, this system should work fine for our needs.

Bee Movement

Previously, the bee "towers" could be moved without restraint. This was definitely not what we wanted for the final game - the bees should only be allowed to be placed on flowers, and they should not attack while moving.

This week, I added this functionality in. Using the Orthello 2D framework, it was actually really easy to add callback functions that are triggered based on dragging events. I'm definitely happy I decided to try this 2D framework because it's been a huge help all along the way.

Now, when you move a bee, it immediately stops attacking and won't start again until it has been dropped. If it is dropped on a flower, it snaps to that flower's center location. If it is dropped outside a flower, it snaps back to it's previous location. We would like to add some fancy features in the future where the hex the bee is being dragged over lights up red or green depending on whether it's a valid location, but it works fine as it is now and is still fairly intuitive.

We do have a small bug in that a bee will sometimes get "stuck" after being dropped on a flower. I need to investigate this further, as it weirdly seems to have something to do with which bee it is specifically.

Demo

This week, I have a web based demo! It requires Unity web player, which is a free download.

Check it out here!

EDIT: Apparently the demo isn't currently working. Bother. I'll look into it in a bit.

Learning Unity

I've got two big projects coming up where I'll be using Unity to make a 2D game. Because of this, I've naturally begun looking into Unity tutorials. Though I have some experience with the engine from the Scottish Game Jam and my team's game Denizen Pop, I still have a lot to learn.

To that end, I've started going through the 2D Unity tutorials by Tim Miller of Rocket 5 Studios: http://www.rocket5studios.com/tutorials/make-a-2d-game-in-unity3d-using-only-free-tools-part-1/

So far the tutorials have been excellent, and have introduced me to a lot of great, free tools I would otherwise never have found. I definitely recommend them to anyone learning to use Unity for 2D game development!

I don't have time to write an in-depth article today, but I hope to post later this week with an update on my team's progress with our game Pollinator: Flower Defense.

Scottish Game Jame: Post-Project Reflection

The game jam is done at least. After a weekend of fun and learning and meeting new friends, I finally got a good night's sleep and am ready to look back on how things went.

Concept art of our game, but the finished product looks essentially like this.

Our game was a 2D running game in which the hero, Denizen Pop (the Ultimate Mare) must escape being turned into burger meat by a wall of... well, of burger meat. She runs across a surreal landscape, collecting carrots (speed boosts) and foals (bonus points) while avoiding barbecues, hedges, and onions.

The game was rather simple, and the gameplay pretty unoriginal. We didn't have a designer on the team and I think that made things much more difficult for us as a group. None of us were really "idea people" and even this simple idea took us longer to decide on than most of the teams. However, we were able to completely finish our game with time to spare and limited stress, so perhaps this simple idea was best.

For programming, we used Unity. I had never used this engine (or indeed, any engine) before and it was a wonderful experience, especially because Dave was a Unity veteran and was able to teach me. Luckily I was fairly familiar with C#, so it was our scripting language of choice. I was very glad to have Dave's guidance in finagling Unity to 2D, as it wasn't particularly intuitive.

Overall, I learned an absolute ton, made some great new friends, and had a blast. This was an excellent experience, and I suggest anyone interested in making games definitely get involved with a game jam as soon as possible. With only 48 hours of your time (or less, depending on the jam length) you'll end up with a completed game, which generally looks better in a portfolio than an incomplete one no matter how fancy. You'll learn to work with others, often both others of your discipline as well as cross-discipline. You may even learn a new technology, as I did. You'll make new contacts in the industry. Most importantly, you'll have a great time and make memories that will last a lifetime.

If you want to play my game, you can download it here: http://globalgamejam.org/2013/denizen-pop-ultimate-mare

Scottish Game Jam 2013 - Day 2

I didn't feel like I had time to post yesterday in the frantic rush to start coding, but today things are a little calmer, so here I am. I'm participating in the Scottish Game Jam (and Global Game Jam) this year, at the Dundee location at Abertay University. Our theme this year is a heartbeat sound file, plus a bunch of optional constraints that can be used if desired.

The team! We were already a bit tired when this was taken, if you can't tell...

My team consists of two people who were complete strangers yesterday - Miranda (@Fluffgar on Twitter) and Dave (@BigHamm3r on Twitter). Miranda is an artist, a student here at Abertay, and Dave is another programmer. We decided to make a 2D game using Unity. I'm quite excited since I am terrible at using editors and haven't used Unity before, so this will be a great crash course.

Our game is coming along quite nicely. It's rather simple, but that's good for the size of our team, time available to us, and my inexperience. I don't have any of Miranda's awesome art to post yet, but I can show a screencap of the game in the Unity editor.

The platformer without any art assets. That red thing is a wall of death.

So far this experience has been amazing. I don't think we'll have any trouble finishing on time, and it will be great to have another piece of work for my portfolio. I'm almost getting to the point where I can actually CHOOSE what I show off to employers, rather than putting everything in there since I don't have much.