Monacaデバッガーで透過png画像が表示されなくなる問題


monacaで麻雀点数計算アプリ制作中に困ったことになったので、ほかにも困ってしまった人がいたときのためにメモを残しておきますφ(..)

・Monacaデバッガーで牌姿のスプライト画像が表示されない
・さっきまで表示されていたからCSSの問題じゃない
・ビルドしてみるとちゃんと表示される
・画像を差し替える前は背景を透過していなかった
・背景を白く塗りつぶしたスプライトにしてみるとデバッガーでも表示された

→ デバッガーのバグかよ!ヽ(`Д´)ノウワァァァン!!

と思ってしばらく牌の画像が表示されない状態で開発を続けていました。
すっごく不便なので、いったん背景が白い画像に戻して全部開発が終わってから透過pngに差し替えてビルドするかなぁなんて思っていたのですが、ふと、png書き出し時の設定がおかしいのかも?と思いついてためしてみました。

monaca
クリックで拡大できます

・・・あっさり解決しました。

「カラープロファイルの埋め込み」にチェック!

これ、フォトショを使い慣れていてそれなりに画像形式とかの知識があるから「ふと」思いついたけど、デザイン面をBootstrapとかのフレームワークに頼っているエンジニアさんとかアマチュアの開発者だったら、悩むんじゃないかなぁ…