Search

jordanwgardner

This WordPress.com site is the bee's knees

Category

games and interactive design

Video clip of fully functional app in use.

 

Creating the Information button.

Screen Shot 2016-05-23 at 10.54.51

to create the information button i used the background i created previously and changed the text to ‘information’.

Screen Shot 2016-05-23 at 10.56.13

I added a rounded rectangle shape and transformed it into a long rectangle to create the basis of the ‘I’.

Screen Shot 2016-05-23 at 10.58.38

I then duplicated the rectangle and made it smaller to create the dot after that I created an Ellipse with a stroke for the border.

Screen Shot 2016-05-23 at 10.58.44

This is the finale button used within the app.

Creating the settings button page

Screen Shot 2016-05-23 at 10.21.58

This is the setting button that allows the user to purchase content or restore it.

Screen Shot 2016-05-23 at 10.22.03

After pressing on the settings button it will take the user to the page shown above here they can purchase or recover content.

Screen Shot 2016-05-23 at 10.22.10

After clicking one of the two options a notification will display asking the user if they would like to buy additional content. This is done by a ‘UIAlertController’. as you can see from the top of the code  when pressed it states ‘@”Purchase Additional Content?”.

After this action the user can choose to purchase the content by clicking on the button ‘Yes, Please” or “No, thanks”.

Screen Shot 2016-05-23 at 10.23.31

If the user has already purchased the additional content the the code at the top of the image

– (IBAction) restore{

    //this is called when the user restores purchases, you should hook this up to a button

    [[SKPaymentQueue defaultQueue] addTransactionObserver:self];

    [[SKPaymentQueue defaultQueue] restoreCompletedTransactions];

will come into action this will inform the user that they have already purchased the content and would ask i they would like to restore it.

Screen Shot 2016-05-23 at 10.23.46

This is the code that allows for the purchase to go through and also notifies the user that the purchase has been successful.

 

Creating the button for the game app

Screen Shot 2016-05-23 at 10.29.10

First i created a square and used colour overlay to convert it to the burgundy that the airshow use. I then applied shadow to emphasise the button.

Screen Shot 2016-05-23 at 10.30.42

Once creating the background i inserted the oval shape and duplicated it to create two. both which will be used for the handles of the controller.

Screen Shot 2016-05-23 at 10.31.11

I duplicated the shape and transformed is rotating it till it was level with the other two ovals.

Screen Shot 2016-05-23 at 10.31.33

I then transformed the scale until it looked similar to a controller.

Screen Shot 2016-05-23 at 10.42.14

I created some buttons by rubbing out the white. I then added the title ‘Aircraft Game’.

 

 

Creating the Aircraft Game

aircraft-game

This is the button for the aircraft game, Once pressed it will take the user to the game where it will display a instruction page.

Screen Shot 2016-05-24 at 10.55.09

This is the information that is displayed to the user when they first open the game. Me and Gareth created this so the user can fully understand how to play.

Screen Shot 2016-05-24 at 11.03.21

This is the settings used on the Instructions page, the page blurs the background so that the user can see that the instructions  are for the game and does not get confusing.

We used a darker colour this makes it easier for the user to see the information displayed.

 

Screen Shot 2016-05-23 at 10.20.07

 

This is the game for the airshow we inserted a UIImageView this was to display the picture of the aircraft, which is linked to the labels that display the stats. the statistics for the aircrafts are linked to a google spreadsheet making it easier for Torbay airshow to change the information last minute.

 

Screen Shot 2016-05-23 at 10.20.14

 

This is the randomise button that the user must press to randomise the aircaft, which will display a different plane and statistics.

Screen Shot 2016-05-23 at 10.20.38

Screen Shot 2016-05-23 at 10.20.45

This is the code that activates when the user pressed the randomise button. ‘int lowerBound = 0;’ tells the code to randomise images from image ‘0’ and the ‘int upperbound = [topTrumpsData count];’ tells the code to randomise the image to the highest numbered aircraft.

(Each aircraft is labeled with a number this is how it can be randomised.)

 

 

 

Creating the Hospitality page

Hospitality

This is the button for the ‘Hospitality’ page. It includes A general summary of prices of the event and promotion of the Tickets.
Screen Shot 2016-05-23 at 10.18.09

Screen Shot 2016-05-23 at 10.17.07

This is the information for the hospitality page, to display this I inserted a text view that would allow the user to scroll and look at all the information displayed.

Screen Shot 2016-05-23 at 10.17.18

Purchase tickets is also displayed at the bottom of the page this is advertising the Torbay airshow tickets and is there if any person using the app wishes to purchase them.

Screen Shot 2016-05-23 at 10.17.37

This is the code that allows the user to be redirected to the tickets page on the Torbay airshow website . As you can see the code stating [mySafari openURL:myURL]; Tells the app to open safari and then the torbay airshow website.

Creating the Map page

Map This is the button for the Map page, within the page is a amp of Paignton.

Screen Shot 2016-05-23 at 09.49.00 This is the page of the map, the map displays googles maps of Paignton and allows for the user to see traffic. This shown through colour, red means that there is a high amount of traffic and orange means that there is mild traffic.

Screen Shot 2016-05-23 at 10.02.37

This is the Objective c code that is linked to this view controller it allow the map to feed directly of off google maps. The latitude and longitude allows the user to get a more specific location. Me and Gareth also added a road closure button at the bottom of the page so that people using the app can get more information if needed this button redirects the to the website.

Screen Shot 2016-05-23 at 10.02.58

Entering this code allowed for me to import a link within the button so when the user pressed the button it would redirect them to the road closure page on the Torbay airshow website.

Creating the Information page

InformationCreating the information page was one of the easiest parts of the whole app. Screen Shot 2016-05-22 at 23.29.45Using the text view I could create a information page where the user could find how to get to the show and any other help they may need.

Screen Shot 2016-05-22 at 23.30.14In the right hand side of Xcode is where it allows you write and customize your text.

Creating the site map

groundPlanThis is the button to the site map which is an image of the area the event will be held.

 

Screen Shot 2016-05-22 at 23.19.34This is the ground plan and what the user will see when clicking on to the site map button. It consist of an image view, a container and text. This is an important part of the app as people may need to find a location of if there is an emergency.

Screen Shot 2016-05-22 at 23.19.45Screen Shot 2016-05-22 at 23.21.23

This is the code that tells Xcode the maximum amount that the user can zoom and also shows how me and Gareth created the information within a scroll view allowing people to scroll to see text not shown on screen.

Create a free website or blog at WordPress.com.

Up ↑