ピグのよくわからない不具合
あつまる→コミュニティで表示される画面が真っ白。。。
OSがWindows 10 Build 10.0.17763,
ブラウザがGoogle Chrome76.0.3809.132の環境で発生。
ピグをリロードしたら治りました。ちょっと不便。
こんばんは。今日から9月で、ピグも終了まであと3か月…！
9月の一発目の記事ですが、インテルが聖書（バイブル）のごとく崇めているページを紹介します。
ピグみたいなゲーム作れるかも？作ろう！
…と思った切っ掛けは、実はこのページを見たからです。
同じピグでもこんなに違う！ピグパーティの新しいクリエイティブの挑戦とは
https://developers.cyberagent.co.jp/blog/archives/1298/
具体的にこういう実装してるんですよ、っていう話が細かく書いてあるので、難しいか簡単かはともかくとして、同じ方法を使えば作れるし、逆に他の方法を使えばこういう風にできるような～とか、色々イマジネーションが沸くわけです。
そうやってこのページから全ては始まったわけなんですが、本当に重要なことがたくさん書かれていて、よく見返してます。
絵をどういう風に描いた方がいいかとか、逆にどういう風に描いたらデータ量増えちゃうかなとか、アバターの形とか、メニューの形とか色とか、プロジェクトの進め方とか…！
手伝ってくれてる皆様、良かったら見てみてくださいね。めっちゃ参考になると思います。
応援してくれてる皆様も、読み物として普通に面白いかったので、良かったら。
服は、りるさんにデザインしていただきました。
りるさんはフォトショップというソフトを使われていて、これはベクター画像を作る用のソフトではないんですが、オートシェイプという機能を使うことでベクター画像のSVG形式ファイルを（むりやり）作っていただきました！りるさんの奮闘記はこちら！
その服をブラウザで読み込んで、アバターの体の上に重ね合わせて描画するプログラムも作りましたのでどうぞ。
https://hearts3.web.fc2.com/0023/
ちなみに、最初はフォトショップでPNGファイルを作成してから、フリーソフトのインクスケイプでSVGファイルに変換できないか、2人で何回か試していたのですが、うまくいかず。。。
インクスケイプにパス抽出の機能があって、これ自体は動くんですけど、「背景を削除して透明にする」が何故かうまく動いてくれなくて、本当の背景と一緒に服の白い部分も透明にしてしまいます。
Inkscapeのパス抽出の機能について参考にさせていただいたサイト：Inkscapeでドット絵をベクター化する
フォトショップ側でPNG-8とかPNG-32で保存して、透明色を指定してやればうまく行くかもしれなかったんですが、そこは最後まで検証してません。
PNGの透明色指定について参考にさせていただいたサイト：何故か3つもあるPNG形式の違いについて
※この記事は、自分が参照するためのガチの作業メモです。
本編：ピグ本体の最低限の機能
- サーバーとクライアントの通信：できた
- チャット欄へのチャット表示：できた
- 画面上へのチャット表示（ふきだし）：まだ
- ベクター画像の描画：できた
- キャラクターの表示：できた
- キャラクターの移動：まだ（升目に沿って・・・とか高さ方向の概念とか）
- キャラのアクション：まだ
- ズームイン・ズームアウト：まだ
- データベースとの通信：まだ
- 服の表示：まだ
- 着せ替えの変更：まだ
- エリアの表示：まだ
- 模様替えの変更：まだ
番外編：サービスの提供にあたって付随的に必要になる機能
- ログイン・登録画面：まだ
こうやって見てみると、次に注力すべきはデータベースの部分。
でもここに取り掛かると、また進捗が外から見えなくなってしまうので、着せ替えとかのUI部分も平行してチマチマやっていくのがいいのかな？
個人的に、スマホ向けというかタッチ操作向けの画面レイアウトもやりたいところだけど…欲張ってもいいことないので、まずはPC版から一歩ずつ。