技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

SwiftでiPhoneアプリを作るその2

2017-10-06 勉強会
インターパークシステム部所属の山口です。

今回は前回に引き続きiPhoneのスマホアプリを作ってみました。
前回と同様Swiftで作成してみたのですが、業務で使用するようなビジネスアプリではなく『ゲームアプリ』を作ってみました。

アプリ開発の前提

今回アプリを開発にするにあたっての前提ですが・・・
① 開発者だけで完成させること(画像もデザイナーなどに作ってもらうのではなく自分で作成する)
② お金をかけず全て無料で開発すること(無料ツールを使う)
③ 1週間以内で開発すること(時間をかければクォリティーが高いアプリが出来るが短期間で作成する)


上記3つを元にした開発となります。

何をつくるか

業務とは一切関係ないことにチャレンジしたかったので「ゲーム」アプリを作ることにしました。

あと直感的にわかるゲームにしたかったので「もぐらたたき」としました。

画面構成

① メイン画面
② ゲームオーバー&結果表示&再スタート画面

のシンプルに2画面の表示としました

ゲームアプリを作るためのフレームワーク

ゲームを一から作るわけにはいかないのでゲームを開発するためのフレームワークを使います。

2Dゲーム開発用のフレームワーク「SpriteKit」を使います。

SpriteKitとは、Apple純正のゲーム開発フレームワークで2Dゲーム開発に適した部品を提供しています。

SpriteKitを使用すると、
画像が他の画像に触れたときの動きを実装したり、画像に重力をかけて落下させたりなどアクションゲームには欠かせない動きを簡潔に実装できるようになります。

○参考動画

Xcodeの開発環境を使ってコード作成

ゲームアプリを作成するにあたって実際にコードを書いたソースは以下3つのファイルとなります。

① ViewControll.swift
② GameScene.swift
③ GameOverScene.swift

ViewController.swift

VIewControllerはどういう役割をするのかというと、名前の通り表示されるViewを管理・操作(表示・非表示・配置・アニメーションなど)をするクラスです。
基礎となるクラス。

GameScene.swift

メイン画面のソースです。

GameOverSence.swift

ゲームオーバー画面(スコアー表示と再スタート)です。

画像

アプリで使う画像をどうするか色々と考えました。
かといってPhotoshopやIllustratorなどの高機能なソフトを使って画像を作ったこともなく簡単に作成できないかできればスマホで作成できればと色々と調べました。

たどり着いたのが「ドット絵」です。
ドット絵とは四角いドット(点)の集合体で描かれた絵のことです。1マスごとに色をつけることで画像を作成することができます。

スマホのフリーアプリに「Dottable」というドット絵作成アプリがあったので使って作成してみました。

※背景についてフリー素材を使いました。

○用意した画像
・アプリアイコン画像
・メイン画面の背景画像
・もぐら画像
・もぐら画像(ヒット時)
・もぐらの穴画像
・スタート表示画像
・ゲームオーバーの背景画像
・ゲームオーバーの文字画像
・再スタートボタン画像


※Mac標準のペイントで加工

Dottable

サイズ指定

キャンパスに色付け

完成イメージ

実機でアプリを確認する!

開発を行ってみての所感

○開発実績
・開発期間:4人日程度
・アイコン画像作成:1人日程度
・合計:5人日程度

用途に応じたフレームワークが準備されていることが多くそんなに難易度は高くなく開発をすることができました。
今後も定期的になにかものづくりにチャレンジしていきたいと思います。
記事一覧へ

Member

システム部開発ユニット
システム部SIユニット
クリエイティブ戦略部デザインユニット
クリエイティブ戦略部プランニングユニット
管理部