PC Games
• Orb Tutorials
• 2D shoot 'em up Latest Updates
SDL2 Versus game tutorial
Download keys for SDL2 tutorials on itch.io
The Legend of Edgar 1.37
SDL2 Santa game tutorial 🎅
SDL2 Shooter 3 tutorial
Tags • android (3) • battle-for-the-solar-system (10) • blob-wars (10) • brexit (1) • code (6) • edgar (9) • games (43) • lasagne-monsters (1) • making-of (5) • match3 (1) • numberblocksonline (1) • orb (2) • site (1) • tanx (4) • three-guys (3) • three-guys-apocalypse (3) • tutorials (17) • water-closet (4) Books H1NZ Arriving on the back of a meteorite, an alien pathogen has spread rapidly around the world, infecting all living humans and animals, and killing off all insect life. Only a handful are immune, and these survivors cling desperately to life, searching for food, fresh water, and a means of escape, find rescue, and discover a way to rebuild. |
— Mission-based 2D shoot 'em up — Note: this tutorial assumes knowledge of C, as well as prior tutorials.
Introduction It's time to introduce our shop, where we can upgrade the KIT-E, our fighter, using cash earned from missions. Our shop is quite a complex beast, and therefore the coding on this bit has been split into two parts. The first part will deal with all the setting up, while the second part will focus on the purchasing logic. Extract the archive, run cmake CMakeLists.txt, followed by make, and then use ./shooter3-17 to run the code. You will see a window open like the one above. Use the mouse to control the cursor. Click on the various shop items (in grey) to view information about them. There's not much else to do right now, so once you're finished, close the window to exit. Inspecting the code As already stated, the shop is complex, due to the logic involved in buying items, which will come next. For now, let's see what goes into the main guts of the shop. Starting with defs.h:
We've created a new enum set, to represent our shop items. SI stands for Shop Item. We have here a full set of the available items to purchase. Next, over to structs.h, where we've introduced a new struct called ShopItem:
As the name implies, this will be used to represent an item for sale in our shop. `id` is the id of the item (one of the SI enums), `name` and `description` are the name and description of the item, `price` is how much catnip it will cost to buy, and `rect` is the rectangular position on screen, used to help with collision detection when the mouse is clicked on one of the items. Now for shop.c. This is where all our shop logic is handled. It's a large file, as you can no doubt already tell! Let's start with initShop:
We're first setting a variable called chatTextId to a random value of numChatTexts. This is used to display the Mouse Bros intro text, which will be randomly picked when we enter the intermission screen (the latter two variables are setup in loadShopChat). Next, we're setting up our buy and equip widgets (both disabled for now), grabbing some textures for use with drawing the backgrounds of our shop item icons (shopItemBackground*), loading the shop item textures themselves (shopItemTextures), and grabbing the image used for the Mouse Bros avatar (mouseBrosPortraitTexture). We're setting a variable called textTimer to 0, which will be used to control printing out the item descriptions (just like our comms screen). Finally, we're setting selectedItem to NULL, so nothing is selected when we first enter the shop screen. That's our setup done, so now we can start looking into the logic. The doShop function is where we drive this:
We're calling doItems and doShopButtons, and also increasing the value of textTimer, to make our text type out (we'll see this in a bit). doItems is the next function to consider.
An easy function to understand - we're merely looping through all our shop items, testing if the mouse is hovering over any, and assigning hoverItem to the shop item, before then testing if the left mouse button has been pressed. If so, and this item isn't already the one selected, we'll set selectedItem as the current shopItem, and reset textTimer to 0. This will mean that our text description typing will start over. Next up is doShopButtons:
We're just calling doWidgets here. Again, our widgets are disabled currently, so this won't do anything. That's our logic done, for now. We'll handle the actual purchasing in our next part. Time to look into our rendering phase. Starting with drawShop:
We're just calling a number of other functions here, that we'll get to one at a time. Starting with drawItems:
This function draws the shop items, and works very much like the section icons, in that it is a composite drawing routine. We first draw a background for our item, changing it depending on if it is the item the mouse is hovering over, or if it's selected, and then we draw both the background and the icon itself. drawShopButtons is next:
This code actually does two things: it calls drawWidgets to draw the shop buttons, but also displays the player's catnip (their cash) to the right of the buy and equip buttons, so that as we buy items we can see our remaining cash update. drawItemDescription follows:
A much longer function now, but actually nothing complex. This renders the big green rectangle on the right-hand side of the screen, that displays information about the item we're interested in, and also draws the Mouse Bros avatar. We start by defined our rectangle as an SDL_Rect called `r`, draw it filled and also with an outline, and then add the Mouse Bros avatar (mouseBrosPortraitTexture) to the bottom right. Next, we test if an item is selected, and if so we prepare three variable: `title`, `body`, and `footer`. `title` will be the name of the item, while `footer` will display its price. `body` will be the item's `description`. As with our comms section, we'll be typing out the text based on the value of textTimer. We'll be adding a * (star) to the text while we've not typed out the entire `description`. If we don't have an item selected, we're going to set `title` and `footer` to hardcoded strings. The body will be selected from a random string chosen from an array called chatTexts (that we'll see later), using the value of chatTextId that we set in initShop. With `title`, `body`, and `footer` all determined, we're rendering the text to the screen. Not an overly complex function, then. Just a little bit too it. Next up is drawKITEStats:
This function merely displays the KIT-E's stats. The Rate stat uses a calculation to convert Game's kite's `reload` value into a 1 - 5 rating, rather than show the internal timer. Our secondary weapon text looks up the name of the weapon in an array called SECONDARY_WEAPON_NAMES. That's it for our rendering and logic at the time. We'll be expanding this in part 2 of our shop implementation. We have a few more function to cover now, that deal with setting up the shop's data. The loadShop function is the entry point for this:
It's calling loadShopItems and loadShopChat. We'll start with loadShopItems:
We load our shop items from a JSON file called shopItems.json, setting up a ShopItem for each entry. We're assuming here that the JSON array contains no more than the number of shop items in our array (IS_MAX). If we want to add more items, we'll need to increase the size of that array. With the data loaded into the items, we next loop through all our ShopItems and setup their positions. We'll align each item to the right of the previous, plus a bit of padding, until we reach a certain point on the screen, at which point we'll reset the `x` position and increase the `y` position, so that the icons appear on the next row down. So, we're just loading our shop item data, and positioning the icons in rows. loadShopChat comes last:
Our random introduction texts for our shop are loaded from a JSON file. We first count how many items are in the JSON array, and malloc an array of char pointers. We then malloc and copy in a char array for each of the lines. So, in short, we're just loading in our text chat strings. That's it for shop.c. We'll now move onto incorporating the functions into the main intermission screen. Turning now to intermission.c, we've updated initIntermission:
We're calling initShop and also setting `section` to IS_SHOP, to jump straight into it (just for now, by default we'll be viewing the planets). Next up is the update to `logic`:
We've added IS_SHOP to our case statement, in order to call doShop. Finally, the update to `draw`:
Likewise, we've added IS_SHOP to the switch statement, in order to call drawShop. That's part 1 of the shop done. As you can see, this is mostly composed for loading data and displaying it. We intentionally left the purchasing logic out so that we don't drown in this part; it's long enough already! Ready to buy and equip things? Good, in the next part we'll look into how that all works. There's a little more to it than one might think. Purchase The source code for all parts of this tutorial (including assets) is available for purchase: From itch.io It is also available as part of the SDL2 tutorial bundle: |