{"id":36,"date":"2021-10-21T23:04:23","date_gmt":"2021-10-21T23:04:23","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/?p=36"},"modified":"2021-10-21T23:04:23","modified_gmt":"2021-10-21T23:04:23","slug":"oooh-shiny-buttons","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/2021\/10\/21\/oooh-shiny-buttons\/","title":{"rendered":"Oooh Shiny Buttons"},"content":{"rendered":"\n

In our last weekly meeting, our group made a decision about the display size of our game, choosing to aim for the commonly used \u201cwidescreen\u201d 16:9 ratio.\u00a0 I created a new version of the map that is 1280 pixels wide and 704 pixels high.\u00a0 Sharp-eyed readers may notice that the height should be 720px for a true 16:9 ratio, but since 720 can\u2019t be divided evenly by 32px tiles, we thought 704px would be close enough.<\/p>\n\n\n\n

A new user interface<\/h2>\n\n\n\n

I added a shiny new UI to the map this week, taking up a vertical strip of space on the right side of the screen.\u00a0 It looked absolutely terrible in the beginning because I had made the buttons as clickable text objects. Then I stumbled on this invaluable resource<\/a> that provides thousands of standardized, editable game icons for free.\u00a0 I picked out four and implemented them as health and money indicators, plus two kinds of \u201cbuy turret\u201d buttons.<\/p>\n\n\n\n

\"\"
Latest version of map 1 with a user interface!<\/figcaption><\/figure>\n\n\n\n

Now when you run the game, you can click on those two blue icons to “buy a turret” which will decrease the player’s money by the advertised amount. They also take on a grey tint when the pointer hovers over them.<\/p>\n\n\n\n

Small additions to the back-end<\/h2>\n\n\n\n

My teammate Cliff wrote the skeleton code to set up Phaser scenes for our game. I added some class variables to keep track of things like player hit points, money, and turret prices, plus a couple functions to update these values.<\/p>\n\n\n\n

It’s important to keep our code as modular as possible so that we can easily make changes and incorporate new features. I wrote a new create-button function with this in mind. <\/p>\n\n\n\n

\"\"
Add a button by calling createSpriteButton.<\/figcaption><\/figure>\n\n\n\n
\"\"
Just supply the x and y coordinates, the name of the preloaded asset (in this case the .png of a button), and whatever function you want to call when the pointer clicks down.<\/figcaption><\/figure>\n\n\n\n

All buttons created with this function will have the same hover-over action. Later, I think I want to modify this so that on “pointerdown”, the user can drag a turret to where the want to place it. Then on “pointerup”, if the mouse is hovering over an available map tile, it will place the turret and withdraw money. Otherwise, it will do nothing.<\/p>\n\n\n\n

Now to bring it all together<\/h2>\n\n\n\n

I feel really optimistic about our game at this point.\u00a0 Everyone has been making great progress and we\u2019re almost ready to merge our separate parts into one cohesive prototype. Next week we’ll be integrating, working out the bugs, and preparing a basic working demo.<\/p>\n","protected":false},"excerpt":{"rendered":"

In our last weekly meeting, our group made a decision about the display size of our game, choosing to aim for the commonly used \u201cwidescreen\u201d 16:9 ratio.\u00a0 I created a new version of the map that is 1280 pixels wide and 704 pixels high.\u00a0 Sharp-eyed readers may notice that the height should be 720px for … Continue reading Oooh Shiny Buttons<\/span><\/a><\/p>\n","protected":false},"author":11576,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/users\/11576"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":4,"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/posts\/36\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}