ピグパのコーデを自動で加工するツールを作りました【おおまかな仕組み解説】
アバターの透過画像と着用中のスクリーンショットから正方形のコーデ画像を作るツールを作成しました✨
「作り方や仕組みが気になるよ！」
「けどプログラミングは分からないよ！」
という方向けにゆるっとおおまかな仕組みを解説してゆきます～
大まかな仕組み解説
①アバター画像の処理
アバターの透過画像を選んだあとはこんなことをしています✨
画像の縦と横のサイズを取得して
使っている端末を推定する透明じゃないところを探す
アバターをド真ん中に表示するために、アバターが表示されている場所がどこかを探します❀
アバターからいろんな情報を取得します(例：iPadPro 11インチ) - プレビュー用に画像を切り取り・圧縮する
切り取り・縮小をします - おすすめな背景色を決めるために
画像をものすごく小さくして色を取得する
背景色を決めます - プレビューを表示する
おすすめの背景色１で塗りつぶした後、
アバターの画像をど真ん中に表示！
アバターのプレビューを表示します
②スクショ画像の処理
- アイテムの枠に沿って切り抜いて整列する
アイテムを切り出して並べます - アバターの下に表示する
- アイテム欄が空っぽの時は上から背景色で塗りつぶしする
空っぽのアイテム欄は目隠しします - アイテム欄の右下に白い長方形を書く
所持数を隠すためにべったり塗りつぶします！
所持数を隠します
ここはいつか直したいところ！
以上おおまかな仕組みの解説でした！
ツールはこちらからお試しいただけます（再掲）↓
おわりに
「プログラミングが分からない！」
という方にも仕組みをふわっと理解できるよう心がけて書きました✨
でももしかしたら難しいお話だったかもしれません…！
「ここはどうやって作るの？」
「解説のここがわからないよ！」
などありましたらお気軽にコメントにどうぞ❀
「もっと詳しく仕組みを知りたい」
「どんなプログラミング言語を使っているの？」
ということは、また別の記事に書く予定ですのでお楽しみに✨
