Contents
守破る(しゅはる)！
このタイトルでは、日本での茶道や武道における師弟関係のあり方の一つである「守破離(しゅはり)」を使った技術ログの企画です。
リリースされているアプリの一部を真似してみて(守の部分)、最後に少しだけアレンジ(破の部分)してみます。ただし、利用する画像やアイコンは著作権もあるためナマケモノにしていきます。また、ゲームのストーリーも勝手に変えていきます。
オリジナルのアプリを作成することが守破離の「離の部分」に該当しますが、この企画ではそこ手前で終わるようにします。ぜひ、みなさんでオリジナルを作ってみてください。
守破るアプリ
今回守破るアプリは、「ゾンビ撃て」です！
Links: → Visit Store → Search Google
ゾンビ撃てでは、タップしてゾンビを倒していきます。この部分を守破りたいと思います。
真似る (守)
ストーリーは、ナマケモノが眠るために枕に向かってきます。枕をタップしてナマケモノを枕にしっかりと誘導してあげるゲームにします。
XcodeでProjectを作成する
それでは、まずはXcodeでProjectを作成していきましょう。
SpriteKitを使うので、Gameを選びます。
次にProject名を決めます。個人名を入れていませんが、個人の開発アカウントがTeamの中に入っている想定です。今回は、Product Nameを「zombi_ute」にしました。
すると、Projectが作成され下の画面になるはずです。
Swift3.0になり、SpriteKitも書き方が変わりました。詳しくは別記事で説明したいと思います。
画像の追加
まずは、画像をProjectに追加します。
画面左側にProjectの中身があるのですが、「Assets.xcassets」が画像ファイルなどを入れる場所です。
下の大きさの２倍の大きさの画像なども入れておいて良いと思います。
「下の画像の名前@2x.拡張子」でProjectに入れると自動で2xに入ってくれます。
今回は、フリー素材から「makura(枕)」とオリジナルの「namakemono(ナマケモノ)」を入れます。
コードでキャラクターを表示する
次にキャラクターをSKSceneに追加していきます。
書くデータは、「GameScene.swift」です。
追加するためには、以下のコードのように「SKSpriteNode」として作成し、画像を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
class GameScene: SKScene { var player = SKSpriteNode(imageNamed: "namakemono_front") var makura_left = SKSpriteNode(imageNamed: "makura") var makura_center = SKSpriteNode(imageNamed: "makura") var makura_right = SKSpriteNode(imageNamed: "makura") override func didMove(to view: SKView) { //背景色 self.backgroundColor = SKColor.green //キャラクターの位置を設定 player.position = CGPoint(x: 0.0, y:size.height/3) makura_left.position = CGPoint(x: -size.width/3, y:-size.height/3) makura_center.position = CGPoint(x: 0.0, y:-size.height/3) makura_right.position = CGPoint(x: size.width/3, y:-size.height/3) //SKSceneにキャラクターを入れる self.addChild(player) self.addChild(makura_left) self.addChild(makura_center) self.addChild(makura_right) } } |
これを書いたあと、「GameScene.sks」を左クリックして「Scene」の下にある「helloLabel」を削除します。
では、シミュレータ画面を軌道してみましょう。
画像ちっさ 笑
画像のサイズ調整
ということで、画像を大きくして配置完了します。
画像の大きさを変えるためには、setScale()を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class GameScene: SKScene { var player = SKSpriteNode(imageNamed: "namakemono_front") var makura_left = SKSpriteNode(imageNamed: "makura") var makura_center = SKSpriteNode(imageNamed: "makura") var makura_right = SKSpriteNode(imageNamed: "makura") override func didMove(to view: SKView) { //背景色 self.backgroundColor = SKColor.green //キャラクターの位置を設定 player.position = CGPoint(x: 0.0, y:size.height/3) player.setScale(3) makura_left.position = CGPoint(x: -size.width/3, y:-size.height/3) makura_left.setScale(6) makura_center.position = CGPoint(x: 0.0, y:-size.height/3) makura_center.setScale(6) makura_right.position = CGPoint(x: size.width/3, y:-size.height/3) makura_right.setScale(6) //SKSceneにキャラクターを入れる self.addChild(player) self.addChild(makura_left) self.addChild(makura_center) self.addChild(makura_right) } } |
これで、配置が終わりました。画像で違うためsetScale()の数値は調整してください。
まとめ
いかがでしたか？最後まで見ていただきありがとうございます。
「守破る！」では、リリースされているアプリを元に真似て改造するまでを勉強がてら行なっていきたいと思います。
SpriteKitの基本文法がswift3.0に伴い変化があったので、SKSpriteNodeのような新しいパーツが増えました。また別記事でまとめますね。
今回はかなり基礎部分しか書きませんでしたが、次回は以下の要素を追加します。
- ナマケモノを3列にする
- ナマケモノの配置をランダムにする
- 一番下のナマケモノと同じ縦軸にある枕をタップするとナマケモノが消えるようにする
- タップを間違えるとナマケモノが回転し、正解した場合「コンボ！』という文字が表示される
