endless running vertical cocos2d - ios

Follow question/answers here, I'm able to create an infinite vertical scroll already, but just for one background image.
Now I move to a new problem.
I have multi background frame image, like 7 frames to complete a background scroll animation.
I can run animation as an endless animation aswell just follow this:
-(void)scrollBackground:(ccTime)dt
{
timeWaited+=dt;
if (timeWaited<FRAME_RATE) {
return;
}
timeWaited = 0;
bgIndex++;
if (bgIndex == 7) {
bgIndex = 0;
}
CCSprite* bgSprite = bgSprites[bgIndex];
bgSprite.zOrder = LAYER_BACKGROUND;
}
But it look very jerky and actually dont look like it's running forward,
I think i may need to scroll each sprite a little before replace it with new sprite,
Or may be i need to zoom each sprite a bit to fit new sprite

Related

SKEffectNode - CIFilter Blur Size Limit - Big Black Box

I am trying to blur multiple SKNode objects. I do this by having a parent SKEffectNode with a CIFilter set to #"CIGaussianBlur". Like so:
- (SKEffectNode *)createBlurNode
{
SKEffectNode *blurNode = [[SKEffectNode alloc] init];
blurNode.shouldRasterize = YES;
[blurNode setShouldEnableEffects:NO];
[blurNode setFilter:[CIFilter filterWithName:#"CIGaussianBlur"
keysAndValues:#"inputRadius", #10.0f, nil]];
return blurNode;
}
This works fine for a bunch of nodes currently onscreen. But when I space these notes far away from each other (about 3000 pixels), the blurring no longer happens and I get a big black box. This happens regardless of whether the SKNodes I'm blurring are SKShapeNodes or SKSpriteNodes. Here's a sample project with this issue: Sample Project. (By the way, thanks to BobMoff for the initial version found here):
Here's happy blur (when nodes are less than 3000 pixels away from each other):
Sad blur (when nodes are more than 3000 pixels away from each other):
UPDATE
This behavior occurs whenever an SKEffectNode is the parent. It doesn't matter if it's enabling effects, blurring, etc. If the parent node is an SKNode, it's fine. i.e. Even if the parent blur node is created like it is below, you will get the blackness:
- (SKEffectNode *)createBlurNode
{
SKEffectNode *blurNode = [[SKEffectNode alloc] init];
// blurNode.shouldRasterize = YES;
// [blurNode setShouldEnableEffects:NO];
// [blurNode setFilter:[CIFilter filterWithName:#"CIGaussianBlur"
// keysAndValues:#"inputRadius", #10.0f, nil]];
return blurNode;
}
I had a similar problem, with a very wide, panning scene that I wanted to blur.
To get the blur effect to work, I removed any nodes that were sticking out too far past the edges of the scene:
// Property declarations, elsewhere in the class:
var blurNode: SKEffectNode
var mainScene: SKScene
var exParents: [SKNode : SKNode] = [:]
/**
* Remove outlying nodes from the scene and activate the SKEffectNode
*/
func blurScene() {
let FILTER_MARGIN: CGFloat = 100
let widthMax: CGFloat = mainScene.size.width + FILTER_MARGIN
let heightMax: CGFloat = mainScene.size.height + FILTER_MARGIN
// Recursively iterate through all blurNode's children
blurNode.enumerateChildNodesWithName(".//*", usingBlock: {
[unowned self]
node, stop in
if node.parent != nil && node.scene != nil { // Ignore nodes we already removed
if let sprite = node as? SKSpriteNode {
// Calculate sprite node position in scene coordinates
let sceneOrig = sprite.scene!.convertPoint(sprite.position, fromNode: sprite.parent!)
// Find left, right, bottom and top edges of sprite
let l = sceneOrig.x - sprite.size.width*sprite.anchorPoint.x
let r = l + sprite.size.width
let b = sceneOrig.y - sprite.size.height*sprite.anchorPoint.y
let t = b + sprite.size.height
if l < -FILTER_MARGIN || r > widthMax || b < -FILTER_MARGIN || t > heightMax {
self.exParents[sprite] = sprite.parent!
sprite.removeFromParent()
}
}
}
})
blurNode.shouldEnableEffects = true
}
/**
* Disable blur and reparent nodes we removed earlier
*/
func removeBlur() {
self.blurNode.shouldEnableEffects = false
for (kid, parent) in exParents {
parent.addChild(kid)
}
exParents = [:]
}
NOTES:
This does remove content from your effect node, so extremely wide nodes won't show up in the final result:
You can see the mountain highlighted in red stuck out too far and was removed from the resulting blur.
This code only considers SKSpriteNodes. Empty SKNodes don't seem to break the effect node, but if you're using other visible nodes like SKShapeNodes or SKLabelNodes, you'll have to modify this code to include them.
If you have ignoreSiblingOrder = false, this code might mess up your z-ordering since you can't guarantee what order the nodes are added back to the scene.
Stuff I tried that didn't work
Simply saying node.hidden = true instead of using removeFromParent() doesn't work. That would be WAY too easy ;)
Using an SKCropNode to crop out outlying content didn't work for me. I tried having the SKEffectNode parent the SKCropNode and the other way around, but the black square appeared no matter how small I made the cropped area. This might still be worth looking into if you're desperate for a cleaner solution.
As noted here, SKScenes are secretly SKEffectNodes and you can set their filter just like our blurNode above. SKScenes don't show a black screen when their content is too big. Unfortunately, they seem to just silently disable the filter instead. Again, I might have missed something, so you could explore this option further if you're trying to apply an effect across the entire scene.
Alternate Solutions
You can capture an image of the whole screen and apply a filter to that, as suggested here. I ended up going with an even simpler solution; I took a generic screenshot of the stuff I wanted to blur, then applied a very heavy blur so you can't see the precise details. I used that as the blurred background and you can hardly tell it's not the real thing ;) This also saves a healthy chunk of memory and avoids a small UI hiccup.
Musings
This is a pretty nasty bug, and I hope Apple comes up with a solution soon. You can click this cute picture of a camera to get a GPU trace and some insight on what's happening:
The device seems to be discarding the framebuffer for the effect node because it takes up too much memory. This is affirmed by the fact that when there's more memory pressure on the device, it's easier to get the 'black square' on smaller content in the SKEffectNode.
I used a method that worked for my game but it requires the blurred area to be static without movement.
On iOS 10 using Swift 3 I used SKSpriteNode, SKView, SKEffectNode, CIFilter. I created a sprite from a texture returned from the SKView method "texture from node" and passed the current scene as the parameter because it inherits from SKNode. So essentially I was taking a "screenshot" of the scene and creating a sprite from it. I then put it in an SKEffectNode with a blur filter. (set "should rasterize" to true for better performance as I only needed to blur once). Finally I added the new sprite to the scene. From there you could add sprites to the scene and place them above the new blurred node.
let blurFilter = CIFilter(name: "CIGaussianBlur")!
let blurAmount = 15.0
blurFilter.setValue(blurAmount, forKey: kCIInputRadiusKey)
let blurEffect = SKEffectNode()
blurEffect.shouldRasterize = true
let screenshotNode = SKSpriteNode(texture: gameScene.view!.texture(from: gameScene))
blurEffect.addChild(screenshotNode)
blurEffect.filter = blurFilter
gameScene.addChild(blurEffect)
Possible workaround for the bug:
Use a camera, zoom WAY out, so you can see most everything of your background, take a screenshot style rendering of this image. Crop it to your needs, and then blur it. Then rasterise this.
Then scale this image back up, and slice it up if needs be, and place accordingly.
SKEffectNode renders into a texture. In most iOS systems the maximum size for a texture is 2048x2048. If an SKEffectNode is trying to render content larger than that, it will just use a 2048x2048 texture and anything outside of it will just not appear in the texture. It won't give you any error or warning about this happening; it simply does it silently.
And no, there is no way to tell SKEffectNode to use a texture of a specific size, and pan&clamp the content into it. It always uses a texture that will cover all the child nodes, and if the texture would be too large, it just silently uses that 2048x2048 texture.

How to move/animate CGRects

I'm having trouble moving CGRects around. I'm trying to make a breakout game. In my drawView file, I have written code in the drawRect function by removing the comments.
I end my drawRect function with this moveBall(&_ball, &_context, rect);
moveball() is declared/implemented in my viewController.h/viewController.m.
I'm not sure how to then move/animate the ball once it is in my controller. I have the following code:
void moveBall(CGRect *ball, CGContextRef *context, CGRect rect)
{
CGFloat velX = 1;
CGFloat velY = 1;
while (ball->origin.x + CGRectGetWidth(*ball) < CGRectGetWidth(rect))
{
CGContextClearRect(*context, *ball);
*ball = CGRectOffset(*ball, velX, velY);
CGContextFillEllipseInRect(*context, *ball);
}
};
What happens is that the ball is "moved" to a different place, not animated there. The problem is that the while loop is implemented and the final result is displayed. I want the while loop to run after the drawing is done.
Can anyone guide me to make the ball move?
Trying to make animations inside the drawRect method using CoreGraphics framework is exercise in futility.
For animations you should use other frameworks/technologies intended for that.
Standard apps - Core Animation
Games - SpriteKit, OpenGL ES, Metal, cocos2D, Unity3D,

I'm unable to make my sprites "Flip"

I'll start off by admitting that I am a beginner to ActionScript and I am in the process of coding my own basic arcade game (Similar to that of the old arcade game "Joust"). Whilst I have been able to code the sprite's movement I am looking to make the sprite flip to face the other way when I press the right arrow. I figured either I could try and rotate the object around its axis (Which I've tried multiple times and has proved difficult) or I could try and "Replace" the current sprite with another sprite (Which is just the sprite facing the opposite way). I've searched everywhere for a method of replacing a sprite with another sprite but to no avail. How would it be possible to give this sprite a flip effect when a certain keyCode is used?
Try this simple code below. Here 'object' is the movieclip/sprite that you want to flip
stage.addEventListener(KeyboardEvent.KEY_DOWN, OnKeyDown);
function OnKeyDown(event:KeyboardEvent):void
{
var uiKeyCode:uint = event.keyCode;
switch (uiKeyCode)
{
case Keyboard.LEFT :
object.scaleX = -1; //flip
break;
case Keyboard.RIGHT :
object.scaleX = 1; //unflip
break;
}
}
NOTE: If you want the movieclip to flip without any shift in its position then the movieclip must be horizontally center registered.
Tell me if this works for you.
Are you using as2/as3? you could flip the axis Y 180 degrees
if your using as2 you will need to either mirror the bitmap via actionScript or
add a second bitmap that is mirrored to the display list.
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressedDown);
function keyPressedDown(event:KeyboardEvent):void
{
var key:uint = event.keyCode;
switch (key)
{
case Keyboard.LEFT :
myMovieClip.rotaionY = 180; // MC will be mirrored
break;
case Keyboard.RIGHT :
myMovieClip.rotaionY = 0;
}

XNA 2D camera with horizontal scrolling boxes and collisions

I've got and XNA 2D game which I've been making, but I'm having problems with it.
I've got boxes scrolling across the screen which my sprite is jumping over. The sprite is being followed by a 2D camera, and I fear that the camera is causing issues, as it's causing the scrolling boxes to stop half way across the screen instead of continuing, and also the number of lives are decreasing rapidly rather than one life when one collision occurs.
This is the code in which my sprite collides with the moving boxes
Rectangle fairyRectangle = new Rectangle((int)position.X, (int)position.Y, texture.Width, texture.Height);
hit = false;
for (int i = 0; i < GameConstants.TotalBoxes; i++)
{
if (scrollingBlocks.boxArray[i].alive)
{
Rectangle blockRectangle = new Rectangle((int)scrollingBlocks.boxArray[i].position.X, (int)scrollingBlocks.boxArray[i].position.Y, scrollingBlocks.boxArray[i].texture.Width, scrollingBlocks.boxArray[i].texture.Height);
if (IntersectPixels(fairyRectangle, fairyTextureData, blockRectangle, blockTextureData))
{
scrollingBlocks.boxArray[i].alive = false;
hit = true;
lives--;
scrollingBlocks.boxArray[i].alive = true;
scrollingBlocks.boxArray[i].position.X = random.Next(GameConstants.ScreenWidth);
scrollingBlocks.boxArray[i].position.Y = 570;
}
}
}
And this is the update function in the scrolling boxes
public void Update(GameTime gameTime)
{
for (int i = 0; i < GameConstants.TotalBoxes; i++)
{
boxArray[i].position.X = boxArray[i].position.X - 5;
boxArray[i].position.Y = boxArray[i].position.Y;
if (boxArray[i].position.X < 0)
{
boxArray[i].position.X = randomno.Next(GameConstants.ScreenWidth) + 700;
boxArray[i].position.Y = 570;
}
Helper.WrapScreenPosition(ref boxArray[i].position);
}
}
I want them to start at the right hand screen and move all the way across to x = 0, but they're currently stopping around halfway at x = 400.
And finally this is where I'm drawing it all, with the sprite and the block
if (gameState == GameState.PLAYINGLEVEL3)
{
graphics.GraphicsDevice.Clear(Color.Aquamarine);
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
backgroundManager.Draw(spriteBatch);
//scrollingBlocks.Draw(spriteBatch);
spriteBatch.DrawString(lucidaConsole, "Score: " + score + " Level: " + level + " Time Remaining: " + ((int)timer / 1000).ToString() + " Lives Remaining: " + lives, scorePosition, Color.DarkOrchid);
spriteBatch.End();
spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Deferred, SaveStateMode.None, camera.transform);
scrollingBlocks.Draw(spriteBatch);
fairyL3.Draw(spriteBatch);
spriteBatch.End();
}
Thanks for any help!
From the code provided I can't tell much about how your camera works but my guess is that when you start the level your camera picks a new center point(rather than the original xna screen location)
In other words, the center of the camera may have pushed it back a bit, so what you think is position 0 of the screen may have been pushed forward to the middle of the screen making the boxes stop. I'd suggest looking at these camera tutorials http://www.david-amador.com/2009/10/xna-camera-2d-with-zoom-and-rotation/ or http://www.youtube.com/watch?v=pin8_ZfBgq0
Cameras can be tricky so I'd suggest looking at a few tutorials to get the hang out matrices and view ports.
As for the lives taking away more than one, It's because your saying "If this box is colliding with my player, take away lives." the computer doesn't know that you only want one taken away as long as it's colliding with the player its taking away lives, it will keep decrementing.
Hopefully this will give you some ideas :D

Swipe Gesture for iOS in Flash CS6

I'm creating an app for iOS (mainly) in Flash CS6 and I'm having a few problems with getting a particular page to work.
The layout is as follows: I have a movie clip that is 3 times the width of the stage with my content, with the instance name of txtContent.
On a separate layer, my Action Script (v3.0) reads as follows:
import com.greensock.*;
import flash.events.MouseEvent;
//Swipe
Multitouch.inputMode = MultitouchInputMode.GESTURE;
var currentTile:Number = 1;
var totalTiles:Number = 3;
txtContent.addEventListener(TransformGestureEvent.GESTURE_SWIPE , onSwipe);
function moveLeft():void{
txtContent.x += 640;
}
function moveRight():void{
txtContent.x -= 640;
}
function onSwipe (e:TransformGestureEvent):void{
if (e.offsetX == 1) {
if(currentTile > 1){
moveLeft()
currentTile--
} else {}
}
if (e.offsetX == -1) {
if(currentTile < totalTiles){
moveRight()
currentTile++
}
}
}
stop();
When I test the movie, with a touch layer, the movie clip successfully moves left and right for each swipe, and does not continue to move too far in either direction, in effect ignoring any other swipes.
However, when I compile the IPA and test on the iPhone, only the first two "tiles" move (I can only see two thirds of the movie clip with swiping), as if I swipe to the third "tile" I cannot swipe back at all. No matter what I do, it gets stuck on that third section.
Is there a problem in my code that isn't registering properly in iOS?
FYI, I'm testing on an iPhone 3GS.
It was my own mistake - the final 'page' of the slides did not have a large background with the alpha set to 0% like the others, therefore to slide it back it would only work when holding the text (which was small). With the addition of the background, the movieclip is solid and therefore swiping the whole screen worked fine.

Resources