reserved.SpriteKitで可変サイズのボタンやダイアログを作る方法2016-10-27SpriteKitでゲームのUIを作っている時に、ボタンやダイアログ、パネル的なものを作りたいが、画面サイズが色々あるので、その分画像を用意するのは面倒くさい。枠だけ決まっていて、伸縮可能にしてサイズは実行時に決定したいという要求は、ままあると思います。他のゲームエンジンでもあると思いますが、SpriteKitでもちゃんと対応していました。これを実装するに辺り、参考になるものがあまりなく(多分昔からある当たり前の技術なので)、色々試していると、うまくいかないことがありました。これは単に自分の勘違いからくるもので、実際は簡単でしたのでハマりごとも踏まえて説明したいと思います。この手法の名称について。patchなどと呼ばれる手法で、テンプレートを9つの分けることで、画像の中で、伸縮する所としない所を分けて、自由なサイズの伸縮に対応します。Googleなどで、上記の用語で、画像検索すると大量に画像が出てきますので確認してみてください。SpriteKitもこの手法に対応していて、ドキュメントにも記載されています。使い方としては、テクスチャを読み込む真ん中のエリアを指定することで画像を9分割する指定のScaleに変更することで、伸縮するという工程で、極めて簡単に作業が完了します。テンプレートなるような、以下のような画像を用意します。texture.size().heightこのようになります。12)の位置から4pixelの幅で区切り、その中を伸縮するということを示しています。ここまでは、ネットで調べても分かる情報でした。非対称テンプレートでの9-sliceしかし、この後、この機能の応用で、パネルにタイトルのエリアを用意して、タイトルエリアを残しつつ、伸縮可能なもの、つまりは上下左右の対称性のないテンプレートを用いた場合に問題が起こりました。分かってしまえばなんてことないのですが、CGRectに関して、以下のような印象を持っていたために、ドハマリしてしまった自分は、だいぶ時間を費やしてしまいました。これはSpriteKitでは間違いになります。正確には、以下のようになります。heightなどは下から上、左から右のベクトルになります。このため、CGRectを作成する際に、底辺からの位置にしないと問題が起こります。最初の例の場合は、サイズの取り方が上下左右すべて、12pixelと共通であったため、問題になりませんでしたが、ここではテクスチャの伸縮がおかしくなります。SpriteKitを始めると、座標は左下が(0,0)だということは最初に学ぶことでもあります。ここで改めて、頭に刻んでおきましょう。2016-10-09About東京在住、フリーランスのプログラマーです。プロジェクトの開発全般(ヒアリング、見積、設計から実装)をしています。部分的なお手伝いのご依頼も随時受け付けています。お仕事の依頼は、Twitter、メールもしくはお問い合わせフォームからお願いします。Contactメールアドレス(必須)メッセージ本文(必須)。