처음에

여러가지로 CocosCreator를 만지게 되었습니다만,
일본어 문서가 압도적으로 적다!
참고서가 압도적으로 적다!
그래서 구현 이전의 문제로 빠지는 일이 많은 상황입니다.

거기서, 같은 습관을 밟는 사람이 조금이라도 줄이면 하고 생각 기사를 썼습니다.

v2.1.1 버전에서 셰이더가 움직이지 않음

CocosCreator를 만지고 있는 분이라면 이해 받을 수 있다고 생각합니다만,
버전에 따라 메소드가 사라지거나 거동이 크게 바뀌거나 꽤 어려운 아이입니다.

셰이더에 대해서도 v2.0에서 대폭적인 변경이 걸렸다고 합니다.
htps : // ぢs 쿳 s. 여기 s2dx. rg / t / u-t-hapene d-u-th-c glp 로그 등 m / 44539

그 때의 해결책에 대해서도 v2.1.1판에서는 프로젝트의 실행조차 할 수 없는 상태.
과거는 되돌아 보지 않는 그 모습, 멋집니다. 현장은 아비규환입니다.

대답은 의외로 가까이 있었다

결론부터 말하면, 셰이더는 "Effect"라는 파일에 프로그램을 기재하는 형태가 된 것 같습니다.
오른쪽 클릭 → 「Create」의 일람에 확실히 존재하고 있었습니다.

Effect 파일 생성 및 편집

Material에 Effect 파일을 등록

Sprite에 Material 세트

이상으로 셰이더를 반영할 수 있습니다.

실제로 해보자

이미지 준비

알기 쉽게 RGB 각각 255의 3색 화상을 작성

Effect 파일 만들기

이번은 자주(잘) 회색으로 하는 쉐이더를 작성하기 때문에, 「Gray」라고 하는 파일명으로 했습니다.

작성한 파일은 텍스트 형식이지만,
JS나 TS 파일과 같이 자동으로 에디터가 기동하지 않기 때문에, 수동으로 파일을 열어 주세요.

Gray.effect

/**
 * 灰色シェーダー
 */

%{
    techniques : [
        {
            passes : [
                {
                    vert : vs
                    frag : fs
                    cullMode : none
                    blend : true
                }
            ]
            layer : 0
        }
    ]
    properties : {
        texture : {
            type : sampler2D
            value : null
        }
    }
%}

%% vs {
    uniform mat4 cc_matViewProj;

    attribute vec4 a_position;
    attribute vec2 a_uv0;
    attribute vec4 a_color;

    varying lowp vec4 v_fragmentColor;
    varying mediump vec2 v_texCoord;

    void main() {
        gl_Position = cc_matViewProj * a_position;
        v_fragmentColor = a_color;
        v_texCoord = a_uv0;
    }
}

%% fs {
    precision lowp float;

    uniform sampler2D texture;

    varying vec4 v_fragmentColor;
    varying vec2 v_texCoord;

    const vec3 grayScale = vec3(0.298912, 0.586611, 0.114478);

    void main() {
        vec4 color = v_fragmentColor * texture2D(texture, v_texCoord);

        float grayScaleColor = dot(color.rgb, grayScale);
        gl_FragColor = vec4(vec3(grayScaleColor), color.a);
    }
}

RGB 값의 가중치가 다른 것은 NTSC 가중 평균법이라고 하며, 흑백 TV에서 사용되고 있던 규격에 의한 것 같습니다.
만약 RGB값을 같은 가중치로 했을 경우, 이번 사용한 화상은 3색과도 같은 농도가 되어 버리기 때문에,
사람의 밝기의 느낌을 고려한 배분입니다.

Material 제작

Material을 새로 만들고 이름을 "Gray"로


방금 만든 Gray.effect 설정
texture는 아무것도 넣지 않아도 괜찮습니다.

스크립트 작성

제대로 확인할 수 있도록 간이적인 Script를 짜

Gray.ts

const {ccclass, property} = cc._decorator;

@ccclass
export default class Gray extends cc.Component {

    @property({
        // @ts-ignore
        type: cc.Material,
        displayName: "Material",
        tooltip: "マテリアル"
    })
    material = null;

    start () {
        let sprite = this.node.getComponent(cc.Sprite);
        sprite.setMaterial(0, this.material);
    }
}

실행 결과

회색이 되었습니다!
RGB도 그렇게 되어 있네요.

보충

effect 파일의 내용에 대해서입니다만, uniform, attribute로 사용할 수 있는 변수명으로 조금 빠졌습니다.
이쪽은 CocosCreator 본체측에 있다
enums.js
forward-renderer.js
에 기재되어 있습니다.

마지막으로

Cocos는 버릇이 강합니다만, Unity에 비해 Web판에서의 기동이 빠르고, 메모리 소비가 적다고 하는 장점이 있는 일과
최근에는 HTML5 게임도 늘어나고 있으므로,
웹 브라우저를 메인으로 하는 게임 등에서는 선택지로서 개미라고 생각합니다.
후에는 VFX 툴이 충실하면 좋지만 ....