ぱんだの冒険日記!スマートフォン用の表示で見るぱんだの冒険日記!プレイ中のゲーム(ポケモンGO、グラブル)やアプリ開発、日常、気になったことを色々と書いてます。日常はてなブログこの広告は、90日以上更新していないブログに表示しています。【スポンサーリンク】Tweet前回は量的な問題で見送った下記の実装を今回はやっていく。縦スクロールは応用すれば横スクロールもでき、スワイプはスマホのアプリで様々な事に使えるので是非この機会にマスターしておきたい所。関数を使っていこうスクロールの実装フリック(スワイプ)入力の取得タッチ開始位置の取得まとめ前回のおさらい前回は下記の記事で背景画像の表示、画像の表示、重なり順序の設定を行った。これらは今後も必須と言っていいほど使う内容だと思うのでまだ知らない人は読んでみるといいかも。今回は前回のコードは不要なので新規でプロジェクトを作成してコードを書いていく。縦スクロールの実装まずは縦スクロールの実装から。前回と同様にプロジェクトを作成し、不要なコードを削除してGameScene.swiftを下記の画像の様な状態にしよう。Warningが出ているがlocationせっかく定義したのに使ってないじゃないかと言われているだけなので気にしないでおこう。関数を使っていこうこれから先いくつも機能を実装していくにあたって今回から機能ごとに関数を作成して行くことにする。これを行うことにより汎用性が高くなりコードの可読性も向上する。言うことで新しく空の関数「scrollBackground」を一番下に記述し、それをdidMovetoViewの最後で呼び出すコードを書いてみよう。正常に呼びだされているか確認するためにscrollBackgroundの中でprintを記述してログを表示してみた。backgroundと正常に表示された。これで正常に関数が呼び出せていることがわかった。スクロールの実装スクロールを実装する関数の準備が出来たので実装を進めていく。縦長の背景を適当に落としておこう。背景画像の準備が終わったら下記のようにコードを書いてみよう。書いた内容としては背景画像を読み込んで初期位置、サイズ、そして名前を設定した。これで実行すると設定した背景画像が描画される。次に動かすコードを書いていく。コードはこんな感じになった。説明はコメントの方に記載してみた。要は動かし方とリセットの情報を定義してそれを1つにまとめてsequenceに登録するイメージ。SKAction.sequenceの中のwaitForDurationの3秒は画像をスクロールさせてから何秒後にリセットするかの秒数。今回は3秒で背景全体がスクロールする様にしているので同じ3秒を指定した。実行結果は下記になる。画像だと解りづらいがちゃんと縦にスクロールできている。ちなみにこの実装には下記のサイトを参考にしたhttps://www.hackingwithswift.com/example-code/games/how-to-run-skactions-in-a-sequenceこれでスクロールの実装は完成!フリック(スワイプ)入力の取得こっちのほうがスクロールよりは簡単だ。pointBeganとpointEndだ。この2つの変数はタッチ開始位置とタッチ終了位置を保存させるために使用する。用意されているtouchesBeganの関数の中を下記のように書き換えてみよう。やっている事としてはタッチされた場所pointBeganに格納し、ループで回しているが1つしかいらないので1つ取得したらbreakを使って抜けだしている。最後にprintで値が取れているかをチェック。このコードを実行すると画像の右下のようにタッチした座標が取得出来る。タッチした座標が取れたので次はタッチ終了の座標を取る。これにはtouchesEndedという関数を定義して実装する。座標の取得はtouchesBeganと同じなので下記のように書いてみる。実行するとタッチしたら2回同じ座標(開始、終了)が表示され、ドラッグすると異なる座標が表示されるようになる。これでタッチの開始と終了位置の取得が成功した。あとはそれが左右かを判断するだけ。コードは下記のようになった。flickと表示するようにし、更に横と縦の移動距離も表示するようにした(今回は上下の移動は関係ないので計算には使用していない)。これでフリックの判定も上手く実装が出来た。まとめ今回は少し更新が遅れてしまったので作業していた内容を「こんな感じで実装しましたよー」的な駆け足報告になってしまって全くライブ感がなかったので少し反省。次回はアニメーションとか衝突判定とかスコアの表示とか画面遷移とかやっていきたい。どれも少しずつ実装は進めているのでこれまたライブ感が薄れてしまっているかもしれない。こんな内容でも誰かの問題解決に繋がっていれば幸いだちなみに今回はまったところとしては、最後に移動距離を比較する「minimumDistance」の判定する所で「distanceHorizontal」の型がCGFloatだったために当初Floatで定義していた「minimumDistance」と比較が出来ずにエラーになったところだ。CGFloatとFloatはそのままでは比較出来ないのでどちらかをキャストしてあげる必要があることに注意しよう。その変数に格納されている値の方を見るときはOptionを押しながらその変数にカーソルを当てることで確認が可能なので気になった時は試してみよう。次回は割りと近い人に出来る様に頑張ります。今回は画像を複数枚使ったアニメーションを作成する。【アラド戦記】ハロウィンイベント終了からのグルフタイムアタックイベント。(1)リンクグラブルxアンテナ城プロアンテナ月別アーカイブRSSはてなブログをはじめよう!panda_gameさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。