KLWPでは画像を角丸にしたり、一部だけを表示することは基本的にはできません。しかしちょっと工夫したりほかのオブジェクトと組み合わせることで実現することもできます。いくつか方法はあるのかもしれませんが、今回は2つの方法を紹介します。
- 本記事は広告およびアフィリエイトプログラムによる収益を得ています。
画像のオプションには「角」がない
画像オブジェクトのメニューには大きさや回転、透過度の設定はあるのですが、画像そのものを変形させるようなものはありません。まぁ必要な画像を必要な形にして用意できればいいのですが、それが面倒な時もあります。
図形にテクスチャとして貼り付ける方法
まず最初の方法では、「画像」ではなく「図形」を使います。図形には「角」オプションがあるので、好きな形に調整します。
そして「FX」タブに移り、「テクスチャ」で「ビットマップ」を選択。
そして目的の画像を選べば、その画像が図形で作成したオブジェクトの形に貼り付いて、角丸を実現したような画像になります。これで完成です。簡単ですね。
この方法では、画像の大きさは元の図形の大きさに依存します。図形を画像でうまく覆うようになるので、画像の一部は切り取られることになります。また、図形の中での画像の位置は変更することができず、基本的に中央に配置されます。
画像をマスクで切り取る方法
次の方法では元となる「画像」と「図形」の2つのオブジェクトを使います。
そしてその2つを
図形
画像
と並べます。
KLWPでは上にあるものから順に描画されていくので、一覧上は上でもレイヤーの重なりで言えば最後に書かれたものが一番上になります。ちょっとややこしいですが、レイヤー上は画像が上になります。
そして2つのオブジェクトを重なるように配置します。画像のほうが上なので図形は見えなくなりますが、わかりやすくするために透過度を調整して透けさせています。
そして「図形」から「FX」タブに移り、今度は「Clip Next Module」を選択します。
これで画像で表示したものが図形で表示したものの形に切り取られます。もとの図形が角丸なら角丸に、図形が三角なら三角に切り取られます。
この方法は、つまり「次のレイヤーのモジュールからこの図形の形だけを切り取って表示する」ということです。なので、画像の位置をずらせば表示される画像の表示範囲も変わってきます。またFXで「Clip Next Module」ではなく「Clip All」を選択すると、「次のレイヤー」ではなく「その後すべてのレイヤー」からこの図形範囲を切り取ることができます。窓から覗くような感覚ですね。
こちらの方法では、表示範囲や複数のレイヤーをまとめて切り取ることができるといった利点があります。ただ切り取るものと切り取られるものと、2つ以上のレイヤーが必要になります。その点は面倒かもしれません。
まとめ
テキスチャで貼り付ける方法は図形だけでなくテキストやアイコンフォントでも可能です。なので多彩な形ができそうです。マスクは図形にしか無いオプションなので使用できるときは限られてくるかもしれません。
今回はとりあえず2つの方法を紹介しました。使う場面によってうまく使い分けたいですね。