[Swift3]攻城シノバズ伝をかなり雑にiPhoneアプリで再現してみた①

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Swift

beatmaniaIIDXのイベント、「攻城シノバズ伝」。もうすぐ終わるよね。筆者は解禁興味ないのでおにぎりが8万個くらい溜まってる。

なんかこのまま放っておくのも勿体無いし、せっかくSwift3の勉強もしてるんだから、iPhoneアプリで超雑に攻城シノバズ伝を再現してみようと思い立った筆者であった。

とりあえず外観から

アプリの画面を横向き固定にする

何事もまず形からだ。

弐寺のディスプレイは横長なので、アプリの画面も横向き固定にする。

画面の向きの設定

ストーリーボードでも横向き表示にする

ストーリーボードの下の方にある「View as〜」の部分をクリックして、横向きの画面を選択しよう。これでストーリーボード上のビューコントローラーも横向きになる。

ストーリーボードの画面も横向きにする

背景を決めてしまう

使用する素材

いらすとや様から素材を拝借させていただきました。

金沢城(石川門)のイラスト

金沢城(石川門)のイラスト

走る忍者のイラスト

走る忍者のイラスト

背景の城を配置する

まずは背景の城から。
イメージビューを配置して、制約はこんな感じで。

城の背景の制約設定

Content Modeを「Bottom」にすれば…

Content Modeの設定

ほら、なんだかそれっぽいでしょ?

忍者を配置する

次は忍者を配置。制約はこんなところか。

忍者の制約設定

で、忍者の画像をどん。

忍者を配置した結果

今気づいた。忍者の向き逆じゃん!!!
うーん。しまった…

忍者の向きを反転させる

Xcodeにぶち込む前に反転すれば早い話だけど、せっかくだから勉強も兼ねて。

まずはイメージビューをアウトレット接続。

アウトレット接続する

そんでもって、viewDidLoadでこれを仕込む。

この状態でアプリを起動すると…

シミュレータの起動結果

ちゃんと右を向いた!

今回はここまで

今回やったこと

ちょっと長くなってしまったんで今回はここまで。先はちょっと長そうだなあ。

今回は

  • アプリの向きを横向き固定にする
  • ストーリーボードのビューコントローラーの表示を横向きにする
  • 表示する画像をCGAffineTransformで左右反転する

あたりをやってみた。

次回予告

次はたぶんラベルやボタンの配置をやっていくと思います。
実際に処理の内容を書くのは、そのまた次になるかな?

もし興味持ったらぜひMac買ってSwiftの勉強してみてください。

 

このシリーズの記事

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。