How do I repeat sprite to tile with cocos2d js html5?

How do I repeat sprite to tile with cocos2d js html5?
0.0 0

#1

Hello, I’m new to cocos2d, read and google too many but it fails all the way. A lot of methods i tried, nothing works

var sprite = cc.Sprite.create("res/tile1.png");
sprite.setAnchorPoint(0.5, 0.5);
sprite.setPosition(size.width / 2, size.height / 2);
this.addChild(sprite, 0);
sprite.getTexture().setTexParameters({minFilter: gl.LINEAR, magFilter: gl.LINEAR, wrapS: gl.REPEAT, wrapT: gl.REPEAT});
sprite.setTextureRect(cc.rect(0,0, 480,800));

Look like problem at the line setTexParameters.
Or this

var sprite = cc.textureCache.addImage("res/tile1.png");
var tile = cc.Sprite.createWithTexture(sprite, cc.rect(0, 0, 128, 128));
tile.setAnchorPoint(0.5, 0.5);
tile.setPosition(size.width / 2, size.height / 2);
this.addChild(tile, 0);

And so much more, there nothing work, some work but sprite don’t repeat. It make a rect with a sprite but dont fill it. I tried latest lite, full, and older versions cocos2d js.


#2

Hello. In my case work:

     var size = cc.winSize;         
     this._waterSprite = new cc.Sprite(texture);
     this._waterSprite.setAnchorPoint(0, 0);
     this._textureRect = cc.rect(0,0, size.width, size.height);

     this._waterSprite.setPosition(this._visibleOrigin);

     this._waterSprite.getTexture().setTexParameters({minFilter: gl.LINEAR, magFilter: gl.LINEAR, wrapS: gl.REPEAT, wrapT: gl.REPEAT});
     this._waterSprite.setTextureRect(this._textureRect, false, this._windowSize);
     this.addChild(this._waterSprite, 0);

#3

Hello, thanks for helping. I tried your code several times, still don’t work. And look like mine still got error from the line getTexture().setTexParameters. Still Have no idea.

Can i ask for which texture in this

this._waterSprite = new cc.Sprite(texture); // texture is sprite or create by something

And which version cocos2d js you use. Thanks


#4

Texture is Texture2D. Tiling sprite can be created only from single texture, not texture frame. I load image from server and in callback create tiling sprite. I use 3.15 version of cocos2d-js


#5

Well, it’s not working. Even i test your code on HelloWorld sample in many versions. That’s weird. Could you please give me a zip pack with a working sample? Really appreciate your time. Thank so much.


#6

Texture must be power of two.Test.zip (53.1 KB)


#7

Thank you for your help, but i think i’m gonna try another way. It’s not working. So weird.


#8

Well, i make it working with your template. But i can’t make it working in mine with single file cocos2d js. But i think i can work this out soon :slight_smile: Thank you so much.