Edited at

iOSアプリ開発:半透明の画像を表示

More than 3 years have passed since last update.

最初は適当に塗り潰した画像を使っていて、その後背景透明の画像を使おうとするケースがある…かもしれません。(自分はそうでした)

意外と、一部抜けのある画像を使おうとした時に分からなくなってしまう為メモしておきます。


画像を用意する。

Gimpと言うツールで用意していて、その手順を記載しています。


画像の用意の仕方。


  • ファイル->新しい画像->

    キャンバスサイズ:好きなサイズを指定してください。

    ※ただし、PG側で用意する際か、ここで用意する画像サイズを縦、横それぞれ2のべき乗にする必要があります。

     Androidアプリは大丈夫だったと記憶していますが、iOSアプリではエラーとなってしまうため注意。


  • 詳細設定

    塗りつぶし色:透明にする。

    ※これをやらないと、デフォルト設定だと背景真っ白となってしまいます。

    コメント:中身を空にする。



画像編集について。

キャンバスが出来たと思うので、後は好きなように絵を描いてください。

もし、文字を表示したい場合は注意が必要です。


  • ツールボックス - パターンウィンドウから文字描画を選択

  • キャンバスを選択

  • 描画したい文字列を記入

    半角英数字なら入力出来ると思いますが、全角だと何故か入力出来ません。


  • 別の手でやるため、文字列を削除。

    すると、ヒストグラム - レイヤーウィンドウに、新たな文字用のレイヤーが追加されていると思います。


  • テキストエディタ等で、描画したい文字列を入力しコピー。


  • キャンバスの先ほど選択した部分を再度選択し、右クリック、貼り付け。

    すると、コピーした文字列が表示されると思います。

    お好みで、フォントとサイズ等を変更してください。



画像保存について。

完成したら、ファイル保存しましょう。


  • Gimp形式で保存。

    ※後で編集する場合、レイヤー単位でいじれるため保存したほうが良い。

    ファイル->保存->お好きな所で保存してください。(*.xcf)


  • PNG形式で保存。

    ※Xcodeプロジェクトで実際に使用するファイル。

    ファイル->エクスポート

     作成日時を保存:チェック外す

     コメントを保存:チェックを外す

     エクスポート->お好きな所で保存してください。(*.png)



Xcodeプロジェクト準備。

既にOpenGLで描画出来る所まで用意してある事前提で記述します。


  • Xcodeプロジェクト以下に、先ほど保存したPNG画像をコピペ。

  • Xcode上で、コピペしたPNG画像のあるディレクトリを右クリック->Add Files to "プロジェクト名"で選択。


プログラム対応。


  • プログラムのPNGファイルを読み込む部分対応。


  • プログラムの描画部分をアルファブレンド対応。

    せっかく画像を用意しても、描画方法をしっかり指定していないと背景は透明ではなく白となってしまいます。


glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);  // アルファブレンド

glEnable(GL_BLEND); // 混合の有効化

〜描画〜

glDisable(GL_BLEND); // 混合の無効化

何か間違い等あれば教えて頂ければ助かります。


更新履歴。

14/10/13 19:17 更新

画像の用意の仕方。の、キャンバスサイズに注意書きを追加しました。