モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。Macクリッピングマスクは、画像の見せたい部分だけを自由な形状で切り抜いて表示する機能です。逆に言うと見せたくない部分を透明化して隠すことが出来ます。切り抜きたい形に色を塗ったマスク画像によって、表示する部分と隠す部分を切り分けます。アニメーションを行う画像を切り抜いたり、マスク画像にアクションを設定して動かしたりすることも可能です。実際にクリッピングマスクを使用したデモを作成しましたので、その作成方法を通してクリッピングマスクの設定方法について説明します。補足説明マスク用の画像について座標系についてあとがきクリッピングマスクを使用したデモ下記のリンクからデモを確認できます。http://githubmorley.github.io/cocosprojects-pages/hellococos06/このデモでは下記の内容を作成しました。画像を右クリックして、画像の右に書いた名前を付けて保存して下さい。*文字とボタンの光用の画像は見えないですが、周囲をぼかした白い画像です。*ボタンの表面の画像は光らせたいところを透明にしています。Resources...』をクリック先ほど保存した画像を選択し、『Open』をクリックスプライトシートの追加インポートした画像をスプライトシートにまとめます。Objects』の『Spriteオブジェクト』を『Canvas』にドラッグアンドドロップ画面右の『Propertiesウインドウ』で『Spriteオブジェクト』のプロパティを下記のように変更*書いていないパラメータは変更していません。Resource』:new_base.png『Resourcesウインドウ』から画像ファイルをドラッグアンドドロップして登録します。モーリーのメモ』でも解説しています。『Animation』ウインドウで下記の操作を行います。『Animation』ウインドウで下記の操作を行います。Frame』:30ボタンは下からベース、光、表面となるように画像を重ねています。IDE』が起動します。『resource.js』の編集スプライトシートを登録します。スプライトシートのファイルは、『res』フォルダ内の『Plist.png』と『Plist.plist』です。『HelloWorldLayer』に、下記のようにコードを書き加えます。機能マスクされたオブジェクトを作成します。『clippingNode』にマスク用の画像を設定します。引数マスク用画像:cc.Node『cc.Node』を継承したクラスのオブジェクトが設定出来ます。スプライト(『cc.Sprite』)も『cc.Node』を継承しています。『clippingNode』の表示と非表示を反転します。『clippingNode』のマスク画像の表示と非表示を分ける透明度のしきい値を設定します。『clippingNode』のマスクされる画像(オブジェクト)を設定します。引数マスクされる画像:cc.Node補足説明マスク用の画像についてマスク用の画像は背景が透明な画像で、切り抜きたい形状に着色しています。今回は黒色にしましたが、何色でも良いようです。座標系について『clippingNode.setStencil(マスク画像)』で設定されるマスク画像と『clippingNode.addChild(マスクされる画像)』で設定されるマスクされる画像の座標は、『clippingNode』のアンカーポイントを中心とした座標です。2つの画像に重なる部分がないと何も表示されません。あとがきボタンを光らせる演出がしたくて画像を切り抜く方法を調べました。難しくなるかなと思いましたが、クリッピングマスク用のクラスがあり、アニメーションを含むオブジェクトも切り抜くことができたので、このクラスを利用して作成しました。マスクする部分としない部分をピクセル単位で分けるため、境界がギザギザになるので、そこは考慮にいれないといけないですね。Studio2』です。v3.7...下記の記事の続きです。2で画面作成:Coco...下記の記事の続きです。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。