Cocos2d-js Shader Series 2: Using Shader on Cc.sprite (black and white, grayscale, old effects)

Source: Internet
Author: User
Tags addchild sepia effect

Using shader to do special color processing in a sprite is simple, just bind the shader program to the sprite:

Sprite.shaderprogram = Alphatestshader;

Cocos2d built-In some shader, detailed can see the code:

Among them, Ccshadercache caches some shader instances, and Glprogram the GL API with a simple encapsulation to make the interface more friendly.

It is important to note that cocos2d will automatically add some parameters when compiling the shader program using Glprogram.

_compileshader:function(shader, type, source) {if(!source | |!shader)return false; //var prestr = (Type = = This._glcontext.vertex_shader)? "Precision HIGHP float;\n": "Precision mediump float;\n"; Source = "precision highp float;         \ n "+" uniform mat4 Cc_pmatrix;        \ n "+" uniform mat4 Cc_mvmatrix;       \ n "+" uniform mat4 Cc_mvpmatrix;            \ n "+" uniform vec4 cc_time;         \ n "+" uniform vec4 cc_sintime;         \ n "+" uniform vec4 cc_costime;        \ n "+" uniform vec4 cc_random01; \ n "+"//cc includes END \ n "+source;  This. _glcontext.shadersource (shader, source);  This. _glcontext.compileshader (shader); varStatus = This. _glcontext.getshaderparameter (Shader, This. _glcontext.compile_status); if(!status) {Cc.log ("Cocos2d:ERROR:Failed to compile shader:\n" + This. _glcontext.getshadersource (shader)); if(Type = = This. _glcontext.vertex_shader) Cc.log ("Cocos2d: \ n" + This. Vertexshaderlog ()); ElseCc.log ("Cocos2d: \ n" + This. Fragmentshaderlog ()); }         return(Status = = 1 ); }

In addition, after binding to the Sprite, Cocos2d will automatically set some values, we just need to do a binding in advance, and this binding operation is also a friendly package. Specifically, you can look at the code.

                Program.addattribute (CC. Attribute_name_position, CC. vertex_attrib_position);                 Program.addattribute (CC. Attribute_name_color, CC. Vertex_attrib_color);                 Program.addattribute (CC. Attribute_name_tex_coord, CC. Vertex_attrib_tex_coords);

The effect on a sprite is nothing more than a color change or filter. Since Cocos does not have a native filter and is not as convenient as flash, then we have to do our own.

The bottom of the implementation of two grayscale and old sepia effect, similar to flash shaderfilter.

(The green ball is the original image, the upper and lower 2 balls are made using different sepia parameters to get the old effect)

varSUGAR4 = Sugar.create (0,0,2); sugar4.x= SIZE.WIDTH/4; Sugar4.y = size.height/1.5; This. AddChild (SUGAR4); Sugar4.scale= 3; varSugar = sugar.create (0,0,2); Sugar.x= SIZE.WIDTH/2; Sugar.y = SIZE.HEIGHT/2; This. AddChild (sugar); Sugar.scale= 3; varSUGAR2 = Sugar.create (0,0,2); sugar2.x= SIZE.WIDTH/3; Sugar2.y = SIZE.HEIGHT/3; This. AddChild (SUGAR2); Sugar2.scale= 2; varSUGAR3 = Sugar.create (0,0,2); sugar3.x= size.width/3*2; Sugar3.y = size.height/3*2; This. AddChild (SUGAR3); Sugar3.scale= 2;         Filter.grayscale (sugar); Filter.sepia (SUGAR2,0.5); Filter.sepia (SUGAR3,0.9);

The code for the filter class:

/** * Created by Kenkozheng on 2014/11/4.*/ /** * can only be used to control the color of sprite, etc., the goal is to implement a flash-like built-in basic filter * Static Class*/ varFilter ={default_vertex_shader:"Attribute Vec4 a_position; \ n "+" attribute vec2 A_texcoord; \ n "+" varying mediump vec2 v_texcoord;  \ n "+" void main () \ n "+" {\ n "+" gl_position = (Cc_pmatrix * cc_mvmatrix) * a_position; \ n "+" V_texcoord = A_texcoord; \ n "+"} ", Gray_scale_fragment_shader:"Varying vec2 v_texcoord; \ n "+" uniform sampler2d cc_texture0;  \ n "+" void main () \ n "+" {\ n "+" vec4 Texcolor = texture2d (cc_texture0, V_texcoord); \ n "+" float Gray = TEXCOLOR.R * 0.299 + texcolor.g * 0.587 + texcolor.b * 0.114;  \ n "+" Gl_fragcolor = Vec4 (Gray, Gray, Gray, TEXCOLOR.A); \ n "+"} ", Sepia_fragment_shader:"Varying vec2 v_texcoord; \ n "+" uniform sampler2d cc_texture0; \ n "+" uniform float u_degree;  \ n "+" void main () \ n "+" {\ n "+" vec4 Texcolor = texture2d (cc_texture0, V_texcoord); \ n "+" Float r = TEXCOLOR.R * 0.393 + texcolor.g * 0.769 + texcolor.b * 0.189; \ n "+" float g = TEXCOLOR.R * 0.349 + texcolor.g * 0.686 + texcolor.b * 0.168; \ n "+" Float b = texcolor.r * 0.272 + texcolor.g * 0.534 + texcolor.b * 0.131;  \ n "+" Gl_fragcolor = Mix (Texcolor, VEC4 (R, G, B, Texcolor.a), u_degree); \ n "+"} ", programs:{},/** * Grayscale * @param sprite*/Grayscale:function(Sprite) {varprogram = filter.programs["Grayscale"]; if(!Program ) { Program=Newcc.             Glprogram ();             Program.initwithvertexshaderbytearray (Filter.default_vertex_shader, Filter.gray_scale_fragment_shader); Program.addattribute (CC. Attribute_name_position, CC.        Vertex_attrib_position); //Cocos will do the initialization workProgram.addattribute (CC. Attribute_name_tex_coord, CC.             Vertex_attrib_tex_coords);             Program.link ();             Program.updateuniforms (); filter.programs["Grayscale"] =Program ;         } gl.useprogram (Program.getprogram ()); Sprite.shaderprogram=Program ; },     /** * Build old * @param sprite * @param degree old degree 0~1*/Sepia:function(Sprite, degree) {varprogram = filter.programs["Sepia" +degree]; if(!Program ) { Program=Newcc.             Glprogram ();             Program.initwithvertexshaderbytearray (Filter.default_vertex_shader, Filter.sepia_fragment_shader); Program.addattribute (CC. Attribute_name_position, CC.        Vertex_attrib_position); //Cocos will do the initialization workProgram.addattribute (CC. Attribute_name_tex_coord, CC.             Vertex_attrib_tex_coords);             Program.link ();             Program.updateuniforms (); varDegreelocation = Program.getuniformlocationforname ("U_degree");             PROGRAM.SETUNIFORMLOCATIONF32 (degreelocation, degree); filter.programs["Sepia" +degree] =Program ;         } gl.useprogram (Program.getprogram ()); Sprite.shaderprogram=Program ; } };

Cocos2d-js Shader Series 2: Using Shader on Cc.sprite (black and white, grayscale, old effects)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.