こんにちは、完全食COMPを始めてもうすぐ1周年、PoiboyグループiOSエンジニアの @imaizume です。
先日VISITS Technologies株式会社さんにて行われたROPPONGI.swift #5にて、半年ぶりの勉強会登壇をさせていただきました。
今回の発表内容は今夏Poiboy内のキャンペーンで表示したスロットゲームの実装についての話になります。
スロットゲームといえば、回転する複数(通常は3つ)のドラムロールが横に並び、ボタンを押して絵柄を止めるゲームのことです。
アプリの画面内で現実世界と同じスロットゲームのUIを実装するとなると様々な要件が発生します。
例えば無限スクロールや中心線での停止、回転速度の調整などです。
様々な実装方法が考えられた中で、自分は最終的にほぼUIScrollviewのみで実装しました。
その詳細についてはSlideShareの方をご覧いただきたいのですが、
無限スクロールは同じリール(絵柄の並びのパターン)を複数用意することで瞬間的にスクロール位置を戻して実現したり、回転速度についてはsetContentOffsetをよしなに設定することで安定した速度を実現しました。
なめらかにスクロールさせるの大変そう #roppongiswift
— shiz@iOSDC LT枠 (@stzn3) August 24, 2018
なるほど、スロットのリール回転の動きをUIScrollView + contentOffsetの調節ででできるのね。#roppongiswift
— fumiyasac @ 10/8 技術書典5【え14】 (@fumiyasac) August 24, 2018
また最終的には、UIScrollViewを継承したクラスを定義しUI更新の処理をカプセル化することで、意外にもシンプルに実装をまとめることができました。
なお発表タイトルに「ほぼ」とあるのは、3つある全てのドラムロールの停止を待って同期的に次のアクションを呼び出す必要があったことから、この部分だけPromiseKitに依存しているためでした。
しかしその結果としてリールや回転数等をパラメータで与えるだけで思った通りの動きを実現でき、理論上何個でもドラムロールを増やすことができる実装となっています。
そのため現在、この実装をライブラリ化して外部に配布することも検討しています。
なお今回の実装はゲームを開始する時点で停止位置やアタリ判定結果は決まっている前提のため、実際のユーザーのアクションで回転を止めるのにどう対応するのかが課題となっています。
スロットゲームを行った結果、キャンペーン期間中はトラブルもなく無事に終了し、ユーザーのアプリ内でのアクションを増加させることにも成功しました。
また今回の実装は時間こそかかったものの、チームメンバーの応援のもと様々な実装にトライできた結果でもあります。
自分の所属するPoiboyに限らず、Diverseには仲間のチャレンジを応援し良いプロダクトを作っていく土壌があります。
そんな組織やチームに興味を持った方は一度お話ししてみませんか?
ぜひ私 @imaizume はじめ、弊社エンジニアへぜひお気軽にご連絡いただければと思います。