How to animate the offset of a sprite

Cocos Creator
#1

What I want is to make a scrolling animation that stays within the “canvas” of the sprite
So basically it should just be a sprite but instead of moving the sprite itself I want to scroll the image within the boundaries of the sprite in x or y direction. So when it moves out of the frame in one side it will move into the frame at the other side.

I might be able to create this effect using a mask somehow but I am not sure how.

In Unity we achieved this with a small script that animated the Offset of the texture to get the scrolling effect. This way we could also adjust the speed of the animation.

Hope it makes sense :slight_smile:

#2

I don’t believe this is built-in to the engine. But you can do this the simple way by creating a shader with an offset uniform and setting the texture parameters to repeat.

// ONLY relevant parts of the fragment shader
uniform vec2 u_texOffset;
void main() {
  gl_FragColor = Texture2D(CC_Texture0, v_texCoord.xy + u_texOffset);
}

Texture2D::TexParams texParams;
// defaults
texParams.minFilter = (GLuint)(texNode->getTexture()->hasMipmaps() ? GL_NEAREST_MIPMAP_NEAREST : GL_NEAREST);
texParams.magFilter = GL_NEAREST;
// to repeat
texParams.wrapS = GL_REPEAT;
texParams.wrapT = GL_REPEAT;
texNode->getTexture()->setTexParameters(texParams);

Note:
If you want to do this with a SpriteFrame where the sprite’s texture data is only a portion of a texture atlas you could add extra uniforms for the sprite’s texture size and the texture atlas size so you can compute and modulo/mask the uv coords correctly. Or do it with a 4-slice quad. This is more advanced and better to go search google if you need that.

#3

Thank you very much stevetranby

I am fairly new to Creator and have not been able to find anything related to adding a custom shader to a sprite in the editor. In Unity I can create a shader file within my project and also download all their built in shaders so I have something to start off with.

How do you add a custom shader to a specific sprite in Creator?

#4

Ah, sorry I tend to not see the topic a question was posted in and presume c++ knowledge will mostly translate to JSB and WebGL. I’m sure the shader setup has changed from 3.0 to 3.11, but it shouldn’t be too hard to get it working in pure javascript.

As far as using Creator I’m not sure if shaders are explicitly supported at this time, I believe not. You should, however, be able to add shader setup in the constructor function or maybe onLoad.

#5

Thanks Stevetranby

We will take a look at it.
As far as we can see shaders are supported but the documentation is just a little sparse :slight_smile:

#6

Yeah, well yes can definitely use shaders if you write everything in code. So it’s supported by the engine if you use WebGL renderer and is “supported” by CocosCreator in that the game can use shaders.

However, my definition of “cocos creator support” means that you can import and edit shaders within the GUI and apply them, see them in action in the GUI scene view, and ideally create Materials like Unity3D. Thus allowing for ease of use to attach shaders.

Anyway, hope you get things working as you want.