-Mohebullah Toofan (motoo14), Doalfikar Alawad (doala14), Štefan Töltési (uttol17) 

 

1. Introduction

ShakeShake is a game that involves shaking the device in order to get the highest score. The game idea is simple because the group believes that simple games are more attractive. The game requires the user to shake their device, preferably a phone, as much as they can to gain the highscore in the different gamemodes. The score can then be uploaded to a leaderboard to compare with other users’ scores.

1.1 Similar Solution

1.1.1 Wake N Shake Alarm Clock

Wake N Shake Screenshots https://itunes.apple.com/us/app/wake-n-shake-alarm-clock/id461785823?mt=8

Wake N Shake is an alarm clock app that requires the user to shake their device in order to turn off an alarm. The app has different levels of shaking, so that the user can adjust how much they must shake the device in order for the bar to fill up and turn off the alarm´.

 

2. Methods and Materials

2.1 Materials

Materials used to develop ShakeShake are descibed here.

2.1.1  Balsamiq

Balsamiq was used to create low level prototypes. Balsamiq offers visual prototyping tools that support iOS features.

2.1.2 Xcode

Xcode is the apple IDE used to create iOS projects and applications. The group used Xcode 10.

2.1.3 Swift 4

Swift 4 is the programming language used by the group.

2.1.4 iOS Device

The group made use of an iPad that was available to loan out from the SDU library.

2.1.5 Mac Mini

Since the group did not have any Apple computers, the Mac Mini computers in the lab were used to ease the development and testing. An alternative way to develop iOS on a Windows computer is using a virtual machine, however this is much less powerful and hinders testing when using the iOS emulators.

2.1.6 Github

Github was used by the group for versioncontrol. Github allowed the group to work on the project simultaneously on different computers and not intefere with eachothers work. Xcode has built in version control tools that support the use of github well.

2.1.7 Firebase

The group used Firebase as the database for the application, as the group has worked with it before, and it provides excellent documentation which is essential.

2.2 Methods

2.2.1 Brainstorming

The group spent some time brainstorming different ideas for what app they wanted to develop. After brainstorming the group voted on what idea they liked the most based on different parameters.

2.2.2 Low-Level Prototype

For low-level prototyping, the group used the program Balsamiq. This program allowed the group to make a quick mock-up of the basic functionality that they had in mind. Using Balsamiq the group made two low-level prototypes.

2.2.3 Interactive Prototype

The group made an interactive prototype of the application in Xcode using the interface builder. The prototype was made to showcase how the flow of the application would be and to give a feel of the applications UI elements.

2.2.4 Implementation

When it came time to implement the application the group decided to split the workload, so that all three groupmembers were not occupied with the same thing.

3. Results

3.1 Methods

3.1.1 Brainstorm

The end result of the brainstorm made by the group, was an agreement to make the ShakeShake application. It was voted on and all the group members agreed that this app would be the most suitable one.

3.1.2 Low-level Prototyping

Based on the ideas the group had, the following two prototypes were made in Balsamiq.

Protype 1

Prototype 1 involved a gamemode, where the user has a set amount of time to shake the device as much as possible in order to gain the highest score. This gamemode could have different difficulties or amounts of time that the user must shake the device. The prototype included a settings and highscore page, along with some achievements.

Prototype 2

Prototype 2 included a log-in screen and a different gamemode. In this gamemode the user must shake their device in order to fill the screen with the blue bar. Difficulties could be set, so that the user must shake their device more in order to fill the screen. Score in this gamemode would be the time it took the user to fill up the bar. Highscore and settings page were identical in the two prototypes.

After making the two prototypes, the group gathered user feedback from their friends by showing them the prototypes and getting their opinion on what was good and what could be different. The general feeling among the users, was that the app looked dull and could be spruced up to be more enticing to use. Of the two gamemodes, users preferred the one in prototype 1, but would like to see the option to switch to the gamemode in prototype 2. The log-in screen from prototype 2 was discarded based on the user feedback, as users did not find it desireable to have a log-in for a simple game such as this. An idea that the group considered was that the user should be able to set their username once when the app opens for the first time.

3.1.3 UI Prototype

After creating the UI prototype in Xcode, the group showed the app to other groups in the class, as part of a presentation class. Since ShakeShake follows very simple design choices, the feedback was minor and mainly suggestions for added functionality. After the prototype demo, the group decided that both gamemodes from the simple prototype, however without including a difficulty setting.

3.2 Implementation

Bitbucket link: https://bitbucket.org/iosprogrammingsdu/shakeshake/src/master/

3.2.1 Process Accelerometer

private func processAccelerometerData(data : CMAccelerometerData) -> Double {
        let d = data.acceleration
        // subtract 1 for gravitational acceleration
        let sum = (d.x*d.x+d.y*d.y+d.z*d.z).squareRoot() - 1.00
        self.dataPointsSum += abs(sum)
        self.dataPointsNr += 1
        
        let score = (dataPointsSum/Double(dataPointsNr))*1000

        delegate?.updateUI(score: score, timeLeft: self.timeLeft)
        return score
    }

For getting data from accelerometer CMMotionManager is used. This class provides method called startAccelerometerUpdates where update interval can be set. In our case interval is 0.01 second. In this method accelerometer data is processed dependant on the selected game mode. The code snippet above is showing how score is calculated for first game mode. This method is called for every accelerometer update. Magnitude of vector of acceleration is computed from accelerometer data coordinates using Pythagorean theorem. Then current score is computed as an average of all the vector magnitudes collected in current game. Finally a delegate method is called to update user interface according to the computed score. Delegate has to conform a protocol ShakeGameDelegateProtocol. This is shown in the code snippet below. 

protocol ShakeGameDelegateProtocol {
    func updateUI(score: Double, timeLeft: Double)
    func updateUIGameMode2(score: Double, timePassed: Double)
    func gameStopped(score: Double)
}

3.2.2 Saving Data

For saving highscores Google’s Firebase is utilized. When game is finished app checks if the final score is in the top ten results for a selected game mode. If score is a highscore following method is called:

 private func saveToDatabase(_ score: Double) {
        let highscores = Constants.refs.databaseRootRef.child("highscores").child(String(settings.selectedGameMode.rawValue))
        let key = highscores.childByAutoId().key
        highscores.child(key!).updateChildValues(["name": settings.getUsername(),
                                                  "score": score]) {
                                                    (error:Error?, ref:DatabaseReference) in
                                                    if let error = error {
                                                        print("Data could not be saved: \(error).")
                                                    } else {
                                                        print("Data saved successfully!")
                                                        self.settings.achievements[8].completed = true
                                                    }
        }
    }

Database structure contains highscores – game mode for a highscore – autogenerated key with name of a user that made the highscore and the score itself. The structure can be seen in the figure below

Firebase Database Structure

3.2.3 Observing Database

To show highscores in highscore table it is necessary to retrieve data from firebase. Only 10 highest scores are displayed in the table. For this firebase query is used that returns ordered data. These results are filled into an array that contains data for an UITableView. After all data are ready UITableView is reloaded with retrieved highscores. This function is asynchronous so app is still responsive to user input even when data is being retrieved. All this is shown in the code snippet below. 

 private func startObservingDatabase(){
        Constants.refs.databaseRoot.reference(withPath: "highscores/\(settings?.selectedGameMode.rawValue ?? 0)")
         .queryOrdered(byChild: "score").queryLimited(toLast: UInt(Constants.maxNumberHighscoresShown))
         .observeSingleEvent(of: .value, with: { snapshot in
            var highscores = [Highscore]()
            for case let child as DataSnapshot in snapshot.children {
                let dict = child.value as! [String: Any]
                let score = dict["score"] as! Double
                let name = dict["name"] as! String
                let highscore = Highscore(name: name, score: score)
                highscores.append(highscore)
            }
                self.highscores = highscores
                self.highScoreTable.reloadData()
        })
    }

4. Discussion

4.1 Evaluating the app

The goal with making ShakeShake, was making an app, that has focus on usability and competitive elements. Based on the implemented features, the goal of making the app usable and competitive has been reached.

In order to get further feedback on the app, the group presented it to family and friends. Based on the feedback the following results were gathered:

Good things:

  • Usability. Everything on the app behaves as the user expects it to and there are very few items on the screen at any given time.
  • Motivation. Achievements motivate the user to try and improve and play the game more.
  • Competition. The competitive elements such as highscore also motivates the user to compete against other users and improve.

Bad things:

  • Limited. Users felt that the app was limited in terms of how many gamemodes there are available. More gamemodes or difficulties were desired.
  • Presentation. The colors used were found to be boring, and users expressed how more vibrant colors would make for a better experience.

Based on the feedback the group received, the group concluded that the  presentation and layout of the app, were too simplified and therefore became boring. To fix this, the group needs to make the app more flashy, while keeping the good usability. The group could have learned more about improving the app’s layout, by comparing it more to the similar app, Wake N Shake.

4.2 Future Work

Based on user feedback and the group members’ own opinion some the things that could be implemented or changed in the future could be:

  • More difficulties
  • More gamemodes
  • Better UI
  • Gamecenter integration
  • Log-In with social media accounts
  • Sharing score
  • Different Themes
  • Offline mode (local highscore)

4.3 Conclusion

The group reached their goal with creating the application and using all the different tools required to make an iOS application. The group gained familiarity with many different aspects of the swift language and the Xcode IDE. The group learned how to integrate an online database into the app using Firebase.

4.4 Perspective

The group would continue the project, by creating more gamemodes, and have more difficulties to choose from. After all the main functionality, the group would then focus on polishing the layout and presentation of the app. Anothe area that the group would need to look at, would be refactoring the code, so that desirable patterns are followed and code smells are eliminated.

 

 

DEMO VIDEO

Leave a Reply