Create textures on the fly (such as these stripes) with CCRenderTexture!
You’re probably familiar with adding premade backgrounds into your games. But what if you could dynamically create backgrounds and modify their colors, gradients, and effects on the fly?
If you’ve seen the game by on the App Store, you’ve seen an example of this in action.
In this tutorial series, you’ll get hands-on experience doing this yourself! You’ll learn:
- How to create textures on the fly
- How to create seamless textures with Gimp
- How to blend shadows and highlights onto textures for realistic effects
- How to create striped textures
- How to set up textures to repeat
- And much more!
This tutorial is based on a great sample project by that was created as part of an on the Cocos2D forums.
Sergey did an excellent job on the demo project, so rather than reinvent the wheel, I’m going to convert his demo code into a tutorial series, along with some extra cool features!
This tutorial assumes you are familiar with Cocos2D. If you are new to either of these, check out some of the other on this site.
Creating Dynamic Textures with CCRenderTexture
One of the cool things about Tiny Wings is that the textures change every day, as you can see in the below screenshot:
But how can you create a dynamic texture in Cocos2D? Well, there is a cool class you can use called CCRenderTexture that allows you to draw to a texture, and then re-use that texture in your game.
Using CCRenderTexture is simple – you just take the following 5 steps:
- Create new CCRenderTexture. You specify the width and height of the texture you want to create here.
- Call CCRenderTexture:begin. This sets up OpenGL so that any further drawing draws into the CCRenderTexture (rather than onto the screen).
- Draw into the texture. You can draw by using raw OpenGL commands, or by calling the visit methods of existing Cocos2D objects (which will issue the required OpenGL commands to draw those objects).
- Call CCRenderTexture:end. This will render the texture and turn off drawing into the texture.
- Create a new Sprite from the texture. You can now create a new sprite from the CCRenderTexture’s sprite.texture property.
Let’s try out RenderTexture to see how it works, to just create a simple colored texture.
But first you need a new project! So in Xcode, go to File\New\New Project, and the choose iOS\cocos2d\cocos2d_box2d template. Even though this tutorial doesn’t use Box2D, some of the follow-up tutorials will, so we’re picking that now to be set up in advance.
Name the project TinySeal, click Next, choose a folder on your hard drive, and click Create.
Then open up HelloWorldLayer.h and replace it with the following:
#import "cocos2d.h" @interface HelloWorldLayer : CCLayer { CCSprite * _background; } +(CCScene *) scene; @end |
This removes the “Hello, World” Box2D code and adds an instance variable to keep track of the dynamic background we’re about to create:
Next, switch to HelloWorldLayer.m and replace it with the following (just to fully remove the Box2D code and get an empty scene):
#import "HelloWorldLayer.h" @implementation HelloWorldLayer +(CCScene *) scene { CCScene *scene = [CCScene node]; HelloWorldLayer *layer = [HelloWorldLayer node]; [scene addChild: layer]; return scene; } -(id) init { if((self=[super init])) { } return self; } @end |
You can compile and run if you’d like at this point, and you should get a blank screen.
Next, add the following new method above the init method:
-(CCSprite *)spriteWithColor:(ccColor4F)bgColor textureSize:(float)textureSize { // 1: Create new CCRenderTexture CCRenderTexture *rt = [CCRenderTexture renderTextureWithWidth:textureSize height:textureSize]; // 2: Call CCRenderTexture:begin [rt beginWithClear:bgColor.r g:bgColor.g b:bgColor.b a:bgColor.a]; // 3: Draw into the texture // We'll add this later // 4: Call CCRenderTexture:end [rt end]; // 5: Create a new Sprite from the texture return [CCSprite spriteWithTexture:rt.sprite.texture]; } |
As you can see, the five steps to create a dynamic texture are the same as we discussed earlier.
Note that instead of calling the plain old CCRenderTexture:begin method, we call a convenience method named beginWithClear:g:b:a: that clears the texture with a particular color before drawing.
We don’t draw anything yet – for now let’s just see what this plain colored texture looks like.
Wrap this up by replacing your init method with the following new version (plus a few new methods):
- (ccColor4F)randomBrightColor { while (true) { float requiredBrightness = 192; ccColor4B randomColor = ccc4(arc4random(管理员在2009年8月13日编辑了该文章文章。 --> |