Be warned, you take a small quality hit when converting to PVRTC. You save A LOT of memory though and the quality isn't very noticeable honestly. I guess it depends on the type of game and graphics you have, I didn't notice it much for hopple.
How to scroll the background screen continuously from top to bottom
(65 posts) (29 voices)-
Posted 2 years ago #
-
I am yet another person with the "flickering edge" problem. Essentially, in my test, I put three sprites side by side on a layer. Each sprite is 480px wide so to start off, one sprite fills the screen completely and two of the sprites are off screen to the right. I then ran a MoveTo action on the layer moving the entire layer to the left until the third sprite now fills the screen. When I do this, I see a flickering edge between the sprites.
1. I see a lot of posts in this thread about converting to PVRTC format instead of PNG. Has this actually worked for any/some of you?
2. Would moving the camera for the layer work instead of moving the layer itself? As a side note, does anyone know where any kind of write up is for using the camera (ie. moving it)?
Thanks everyone,
Dave
Posted 2 years ago # -
Ok, I did some more looking in this forum - it appears that simply overlapping any two adjacent sprites by two pixels does the trick.
Posted 2 years ago # -
I had a little problem when trying to put the example codes that trump-card put up into my project.
I had this Texture2D may not respond to -setTexParameters: warning and cannot get into my actual game scene itself. Tried another example of scrolling background and it gives the same warning at the same line of code.
[s.texture setTexParameters:¶ms]
Posted 2 years ago # -
I believe the 'flickering edge' issue can be resolved by using an image width (if sideways scrolling) that is a power of 2.
So for a image that is currently 480px wide try 512px.
Posted 2 years ago # -
Another way to implement this would be rewriting the TextureNode class a bit with of calls to transform the Texture itself.
I wrote a class that will scroll backgrounds using cocos2d actions so it may be more easier to setup quickly. It actually rotates and scales images inside the sprite as well!. You can use it without needing to credit me but I hope it makes scrolling backgrounds and other funky texture transforms easier.
What you do is set the texture you want to GL_REPEAT in the tex params. Then you call some actions like:
// Create a TTextureNode which is an extension of TextureNode (pretty much like a sprite) TTextureNode *node = [TTextureNode node]; // add a texture image it's nicer if it's a square sized image that's a power of 2. node.texture = [[TextureMgr sharedTextureMgr]addImage:@"RepeatingClouds.png"]; // Smooth texturing with GL_LINEAR if you scroll, and GL_REPEAT continously repeats image ccTexParams texParams = { GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT }; [node.texture setTexParameters:&texParams]; // run a scroll action, if you notice that the position moved by is (1.f,0.0f). That is because a texture positioning is always normalized to [0.0..1.0] so moving 1.f is moving through an entire texture image. // This moves the texture inside the node leftwards to the end in 1 minute but then repeats forever [node runAction:[RepeatForever actionWithAction:[TextureMoveBy actionWithDuration:60.f position:ccp(1.f,0.f)]]]; // OR // This moves the texture inside the node leftwards 'looping 5 times' in a minute [node runAction:[TextureMoveBy actionWithDuration:60.f position:ccp(5.f,0.f)];I placed the code @ this section if anyone is interested in checking it out.
The TTextureNodeTest hopefully will explain and make everything clear. The main class is called TTextureNode.
Posted 2 years ago # -
That's what I've been doing. The last column of pixels on an image is the same as the first column of the next image. An image is placed every 479 pixels.
Posted 2 years ago # -
Thanks for this valuable support. I need help regarding few things.
How could we scroll images repeatedly in such a way that it looks like being closer when an image comes to the bottom of the screen while another one which is at the top of the screen looks farther. For example if we need a road looks moving towards us continuously. The big problem is I'm facing problem in scaling and positioning the images of road.Also how could we trap the position of each image added to the SpriteManager. I want to control the scrolling object with its position and its speed (scale factor and position).
The thing is that I want to run a car on the road ( with its separator sign). So I want to move the road while the car will remain in the same position (in the middle of the screen).
Thanks
Posted 2 years ago # -
I'm on it!
I've now fixed up the class for cocos 0.99.0-rc and made some changes to it's name. The demo will sort out all your issues I hope.
Posted 2 years ago # -
LAM!!!
Thank you so much for that!!
Just wondering, though. Is there a way to get two images in there and scroll one after the other?
I'm going to poke around to see what I can figure out, but I thought I would ask to see if you have a good way of doing this.
Thank you so much for sharing that! It's exactly what I needed and it works really well!
Posted 1 year ago # -
By your question i probably misunderstood how your code works .
In your demo the scrolling, rotate and scale do not repeat forever. Is this as it is supposed to work?
I need to scroll a background "forever", can i do that?I've tried it both on the simulator and iphone.
Posted 1 year ago # -
@hugocosta
Yeah you can add a forever action to scroll forever. They're set up so that all actions in cocos2d work so you can repeat them, sequence them, spawn them and ease them. They work like standard MoveBy, RotateBy, etc, actions.Sometimes you don't want to just scroll forever and have more detailed control by accessing the textureTransform property. For example the background may scroll depending on the movement of the player.
Hmm... I guess the demo doesn't explain all the things I can do with texture transformations. Maybe i'll make a post about it sometime this week to give a little more insight into the CCTransformTexture class.
Posted 1 year ago # -
@Lam
Thank you for your answer, it pointed me to CCRepeatForever and use it with CCTextureMoveBy. I guess i need to study a little more about coco2d. :)
This did the trick, and provides an endless vertical scrolling sprite/background:
CCAction *action = [CCRepeatForever actionWithAction:[CCTextureMoveBy actionWithDuration:20.f position:ccp(0,-10)]];
Posted 1 year ago # -
Yeah but remember that there is an upper limit depending on the device. It's either 1024 or 2048.
Other than that, all you need to remember is to keep the texture a power of 2 (2,4,8,16,32,...,256,512,1024).
Posted 1 year ago # -
@Lam... I've tried out your code snippet (POSTED 7 MONTHS AGO #) and it works fine for me. This is what I've asked here (few months back) plus how to scale moving sprite simultaneously. So that sprites sizes become bigger & bigger while they come closer & closer.
Can we use scaleBy and MoveTo to work simultaneously instead of the fashion like: finishing one action then starting next?
Also is there any callback function where I can watch and control current position & speed for each moving sprite?Actually I've to clone the moving road (background) of this game: http://www.mindjolt.com/games/crazy-cabbie
Any code snippet please! I'm avidly waiting of your reply.
_ThanksPosted 1 year ago # -
Can we use scaleBy and MoveTo to work simultaneously instead of the fashion like: finishing one action then starting next?
A CCSpawn will allow you to run simultaneous actions together so yeah you can run scaleBy and MoveTo.
If you're talking about the actions for the Transform Texture then they should work as well so TextureScaleBy and TextureMoveBy is very similar to ScaleBy and MoveBy but read the header comments which explains all that.
Also is there any callback function where I can watch and control current position & speed for each moving sprite?I'm not sure what that means but you can have finer control over the Transformable Texture by accessing the transform texture struct directly. This does mean that you won't be using the actions I created.
Actually I've to clone the moving road (background) of this game
Oh I see. Well that game brings up an idea. Since the road is stretched to simulate a 3D perspective, you can get the same effect, I believe, by taking advantage of texture mapping. Rather than map onto a quad why not try a trapezoid?
Posted 1 year ago # -
For me its really not expecting for Cocos2D that it doesn't have any example on continuous scrolling a few sprites (say: from top to bottom). There are examples on sprites, sprite managers, textures, tile maps etc. which demonstrate scaling and scrolling of stuffs. But I'm unable to find any example which can show continuous scrolling few sprites one by one and scaling them accordingly.
For help I would request here to provide me with some code snippet which can demonstrate: how to scroll two sprites one behind another and scale them properly. Spawn helps us combining several action, moveby, moveto, scaleby etc. but if there are more than one sprites coming from top to bottom (like the moving road in the above question), then how to update their speeds, scale factor etc.
For example: we have
A:-
sprite1 and sprite2 each of height 40
sprite1 pos is (240, 80)
sprite2 pos is (240, 60) --(is just behind sprite1)
sprite1 y scale is set to 0.30 (size changed)
sprite2 y scale is set to 0.20 (size changed)both sprites start moving from top to bottom
a scheduler function "update" (provided in spawn method) is invoked. (my own way, if there is a better way help me out plz)B:-
in update function we got the changes like:
sprite1 pos is (240, 100)
sprite2 pos is (240, 80)Now i changed the y scale of sprite1 to 0.35 (sprite1 size changed, it stretched a few pixel bottom as well top)
NOW HERE I'M UNABLE TO DETERMINE THE REQUIRED SCALE FACTOR for sprite2 so that it can be positioned just behind the sprite1 and also can have some change in y towards bottom.Well, sprite was moving with certain speed say: 10 pixels in 1 sec
I want to change it to 15 pixels in 1 sec.
-------------------------------I'm sorry for asking like this... a layman style. I've asked few times the same questions... people here suggested to use GL_REPEAT or repeatForEver, sclaeBy etc. like that with Spawn. So I just get annoyed. There are a few posts about continuous scrolling of sprites but nothing for scale and speed controls and of course sprite moving behind another.
So I'm not going to scroll clouds (right to left or vice versa) where we may not have to maintain scale factors. I need to move few sprites from top to bottom where changes in the positions of each sprite directly associated with changes in scales.Please reply with a few code snippet. I've stuck at this point for last few weeks.
Thanks
Posted 1 year ago # -
Are you a programmer like your occupation mentions? Maybe there is a difference between programmer and a developer. A developer would not be stuck for 2 weeks waiting for the code solution to be given to them. A developer would write code to address the issue and then maybe if they had trouble with one part they would post that code for help.
It's very rude to tell people that are attempting to help you that you are ANNOYED just because they aren't giving you the exact answer you are looking for.
Posted 1 year ago # -
Scrolling's a bit of an open ended question, there are numerous ways of achieving the result you want. I find planning the effect I want on paper in some detail and then setting out to achieve that effect is far more productive than picking up various code snippets.
Some questions I'd be asking before I got near any code;
1. Are you simply scrolling top to bottom or are you trying to simulate a vanishing point
2. Can everything appear in one atlasSpriteManager or are you going to want particle effects to appear underneath your objects? (better planned out at the beginning than having to incorporate mid way through)
3. Will the Z of the sprite change over time i.e if you are in some sort of perspective mode you may have some sprites going faster than others in whhich case you will need to manage the depth of each sprite.
4. If using a perspective effect, how big are the Sprites when they come on the screen at the bottom, how big will they be when the go off the top, is the initial size going to limit the number of sprites you can move slowly.
5. Are you repeating the background or will you be changing it at intervalsThis post may help with the scaling part http://www.cocos2d-iphone.org/forum/topic/1813#post-11343
Sorry for the vague reply but the question is a bit generic.
Posted 1 year ago # -
@Shafijami
I'm sorry that I've annoyed you. I did not intend any harm, it was probably me misunderstanding your question =/I feel as though I still don't quite understand what you are still asking, so I'm not too comfortable in responding again.
If you are having so many problems it may be that you can't actually easily use actions but may have to implement your own routine in a scheduled method. With some math, you can specify scale and position directly.
Posted 1 year ago #
Reply »
You must log in to post.