스프라이트 마스크 처리(Cocos Code IDE, Lua 언어)

Cocos Code IDE를 사용하여 Lua 언어로 이미지의 일부를 다른 이미지의 형태로 빼내는 마스크 처리에 대해 정리했습니다.


실행 환경, IDE
Cocos2d-x 버전
언어


Cocos Code IDE Mac OS X 1.0.0-RC1
Cocos2d-x V3.2
Lua 언어

샘플 코드

새로운 프로젝트 생성으로 생성된 GameScene.lua의 GameScene.create()를 다시 씁니다.

GameScene.lua/GameScene.create

function GameScene.create()
    local scene = GameScene.new()

    -- 画面サイズを取得    
    visibleSize = cc.Director:getInstance():getVisibleSize()

    -- クリッピングノードの作成とレイヤへ追加
    local clippingNode = cc.ClippingNode:create()
    clippingNode:setAlphaThreshold(0)
    clippingNode:setPosition(0, 0)
    clippingNode:setAnchorPoint(0, 0)
    scene:addChild(clippingNode)

    -- マスク画像の作成とステンシルに設定
    local mask = cc.Sprite:create("mask.png")
    mask:setPosition(visibleSize.width/2, visibleSize.height/2)
    clippingNode:setStencil(mask)

    -- 画像をクリッピングノードに追加
    local image = cc.Sprite:create("image.png")
    image:setPosition(visibleSize.width/2, visibleSize.height/2)
    clippingNode:addChild(image)

    return scene
end

mask.png 및 image.png를 준비하여 프로젝트의 res 디렉토리에 추가합니다.

mask.png

image.png

실행하면 image.png가 mask.png에서 반복되어 표시됩니다.

해설

clippingNode:setAlphaThreshold(0)를 잊으면 마스크되지 않습니다.
clippingNode : setStencil로 마스크 용 이미지를 설정합니다.

보려는 이미지(여기에서는 image.png)가 클리핑 노드에 추가되어 표시됩니다.
클리핑 노드가 일부만 표시되는 레이어라고 생각하면 알기 쉬울까 생각합니다.

마스크용 이미지 정보

마스크용의 이미지는 배경을 투명색, 표시하고 싶은 부분을 어떤 색이라도 좋기 때문에 칠해 작성합니다.
이미지 파일은 프로젝트의 res 디렉토리에 추가됩니다.

마스크 할 부분을 반대로하고 싶을 때

마스크하고 숨기는 부분과 표시하는 부분을 반대로 하고 싶을 때는 clippingNode:setInverted(true) 를 사용합니다.

잘 표시되지 않을 때

잘 표시되지 않을 때는, clippingNode:setAlphaThreshold의 설정이 되어 있는지, clippingNode:setStencil로 마스크 화상이 지정되어 있는지, 클리핑 노드나 화상의 위치, 앵커 포인트가 이상하기 때문에 표시 범위 밖으로 튀어나오지 않았는지 등 를 확인해보십시오.