i would like to change the screen size so that sprites will disappear before they reach the real screen edges.
BUT i still want my background to stay on all of the screen size.
Imagine a paper on my screen so i want to game to exist only on that paper, and around that paper there still will be some background.
so, how do i set my CCSprites to move in and out from that paper and slowly disappear when coming to its edges ?
my sprites are moves with : (i need to put some code to get published cause site "standard" )
id moveclouds1 = [CCMoveTo actionWithDuration:30 position:ccp(420,380)];
thanks.
you can use glscissor for that
simply subclass a CCLayer to make your "paper screen". Then add you sprites inside this layer.
on this layer override the visit method
- (void) visit
{
glPushMatrix();
glEnable(GL_SCISSOR_TEST);
glScissor(x,y, width, height); //here put the position and the size of the paper/screen
[super visit];
glDisable(GL_SCISSOR_TEST);
glPopMatrix();
}
a sprite reaching the border of the paper/screen will be scissored off.
REMEMBER: glScissor will use PIXEL values not points, so it`s your job to use double values for retina display ( CC_CONTENT_SCALE_FACTOR() can come in handy )
Related
I understand that I can already create a minimap by modifying a view object, as outlined here, but what I want instead is a small rectangle that will have a box or an arrow representing the player, and other colored boxes that represent enemies or various objects. Is there a better way to do this than simply create a Minimap object that calculates where each enemy is and translates that into a representational object (box, arrow.. etc) that then gets drawn to the screen?
This is a general question more than anything, so I'm not really expecting sample code, even though it would be much appreciated. I'm outlining a minimap class now and I'll upload it here soon.
Here is what I'm doing in my draw loop:
minimap.setCenter(player.getPosition());
minimap.setViewport(sf::FloatRect(0.75f, 0.75f, 0.25f, 0.25f));
//Bottom right corner of screen
window.setView(minimap);
window.draw(player);
window.setView(view); //Return to default view
With a call to minimap.zoom(10); when the view is initiated.
Actually, I tried this:
window.setView(minimap);
sf::CircleShape object;
object.setRadius(200);
object.setFillColor(sf::Color::Blue);
object.setPosition(player.getPosition());
window.draw(object);
object.setFillColor(sf::Color::Red);
for (auto& e : enemies)
{
object.setPosition(e->getPosition());
window.draw(object);
}
window.setView(view);
And that worked. Obviously it would benefit from being in its own class, so that the circle didn't have to be recreated each loop etc..
If there's a better way to do this, be sure to mention it.
Here's a screenshot of the Minimap (Bottom Right):
I have a game I'm currently working on, and it uses multiple views (for a minimap for example).
Thing is, I would like to have a fading effect added at some point, so I thought I'd create a black image that is the size of the screen and change its alpha value with a timer. That part is not a problem.
What happens right now is the main area (ie window default view) is fading (because the opacity of the image is increasing), but the minimap (minimap view) is unaffected. This is normal behaviour for views, but is there a way to draw an image to the whole window, regardless of the views ?
Thanks in advance
To clarify, you have the default view where you'll draw the main game, then you'll have the minimap view where you would draw the minimap. At some point in the game you want the whole screen to fade to black. It sounds like you've been trying to draw a black image on the default view (changing the alpha) to make this effect work.
So, you need a third view that you draw your black image on to get this fading effect.
I'm using glScissor() in my application and it works properly, but I met a problem:
I have my Window object for which drawing area is specified by glScissor() and inside this area, I'm drawing my ListView object for which the drawing area should also be specified with glScissor() as I don't want to draw it all.
In a code I could represent it as:
Window::draw()
{
glEnable(GL_SCISSOR_TEST);
glScissor(x, y, width, height);
// Draw some components...
mListView.draw(); // mListView is an object of ListView type
glDisable(GL_SCISSOR_TEST);
}
ListView::draw()
{
glEnable(GL_SCISSOR_TEST);
glScissor(x, y, width, height);
// Draw a chosen part of ListView here
glDisable(GL_SCISSOR_TEST);
}
But of course in this situation enable/disable calls are wrong:
glEnable(GL_SCISSOR_TEST);
glEnable(GL_SCISSOR_TEST);
glDisable(GL_SCISSOR_TEST);
glDisable(GL_SCISSOR_TEST);
If I remove those internal glEnable/glDisable calls (the ones in ListView), I would anyway end up with two glScissor() calls which also seems to be wrong.
EDIT
I would like to somehow achieve both scissor effects, I mean - that Window should draw only in it's scissored area and internal ListView also only in it's scissored area.
As you can see in a picture, with red rectangle I have marked scissor area for Window which WORKS, and with a blue rectangle I marked an area on which I'd like to draw my ListView. That's why I was trying to use nested scissors, but I know it was useless. So basically my question is, what could be the best approach to achieve this?
Since OpenGL is a state machine and the scissor rect, like any other state, is overwritten when calling glScissor the next time, you have to properly restore the window's scissor rect after drawing the list view. This can either be done by just letting the window manage it:
Window::draw()
{
// draw some components with their own scissors
mListView.draw(); // mListView is an object of ListView type
glScissor(x, y, width, height);
glEnable(GL_SCISSOR_TEST);
// draw other stuff using window's scissor
glDisable(GL_SCISSOR_TEST);
}
But it might be more flexible to let the individual components restore the scissor state themselves, especially if used in such a hierarchical manner. For this you can either use the deprecated glPush/PopAttrib functions to save and restore the scissor rect:
ListView::draw()
{
glPushAttrib(GL_SCISSOR_BIT);
glEnable(GL_SCISSOR_TEST);
glScissor(x, y, width, height);
// Draw a chosen part of ListView here
glDisable(GL_SCISSOR_TEST);
glPopAttrib();
}
Or you save and restore the scissor state yourself:
ListView::draw()
{
// save
int rect[4];
bool on = glIsEnabled(GL_SCISSOR_TEST);
glGetIntegerv(GL_SCISSOR_BOX, rect);
glEnable(GL_SCISSOR_TEST);
glScissor(x, y, width, height);
// Draw a chosen part of ListView here
// restore
glScissor(rect[0], rect[1], rect[2], rect[3]);
if(!on)
glDisable(GL_SCISSOR_TEST);
}
This can of course be automated with a nice RAII wrapper, but that is free for you to excercise.
edited: General case.
Every time you set the scissor state with glScissor, you set the scissor state. It does not nest, and it does not stack, so you cannot "subscissor" with nested calls to glScissor. You'll have to manually compute the rectangular intersection of your ListView and your Window bounding rects, and then scissor to that when drawing ListView.
In the general case, you'll be manually maintaining a stack of scissor rectangles. As you draw each sub-element, you intersect the sub-element's bounding rect against the current top of the stack, and use that as the scissor for that sub-element. Push the new subrect onto the stack when painting children, and pop it when returning back up the hierarchy.
If you're painting other contents to Window, you'll also have to make sure to handle overdraw correctly; either by setting the Z ordering and enabling depth buffering, or by disabling depth buffering and painting your contents back-to-front. Scissoring won't help you mask the Window contents behind the ListView, since scissors can only be rectangular regions.
OpenGL is a state machine. You can call glScissor, glEnable and glDisable as often as you'd like to. They don't act like opening-closing braces that must be matched. If your calls "fold" like this, that's no problem. Just don't expect the one scissor to merge with the other one; it will merely change/overwrite the previous setting.
I'm trying to control the order in which CCSprites are being layered one on top of the other. I'd use zOrder, but I'm animating characters made up of articulated sprites (some sprites parented on others with addChild) and zOrder is only honored among sibling sprites.
Basically, I want to parent my sprites so they can inherit each others' transforms, but I want to determine the draw order.
Looking around, it sounds like using a CCSprite's vertexZ property is the way to go. I've tried that. I set the draw method of my custom CCSprite like so:
- (void)draw
{
glEnable(GL_BLEND);
CHECK_GL_ERROR_DEBUG();
glBlendFunc(GL_SRC_ALPHA, GL_ONE);
CHECK_GL_ERROR_DEBUG();
[super draw];
glDisable(GL_BLEND);
}
Each of my sprites now has a zOrder of 0 and a unique vertexZ to layer them as I'd like, but it's not working: any sprite that has a parent is not displayed!
Trying some things, I find if I don't set vertexZ, all sprites are displayed. And if I keep the vertexZs and don't parent, they're all displayed. But with vertexZs set, any child sprite won't display.
What's going on here and how can I get it to work?
Update: More clues. I can comment out the GL functions around my call to [super draw] entirely and the results are the same. Also, it turns out child sprites with a vertexZ do display, but wherever they overlap any other sprite they go invisible. The purple paper sprite is a child of the creature's left forearm sprite (on screen right) yet should go on top of it.
For the picture above, I'm basically doing this in my CCLayer. I want the parenting, but I want hand and paper to be on the top.
[self addChild:lUpperarm];
[self addChild:lForearm];
[self addChild:face];
[self addChild:rUpperarm];
[self addChild:rForearm];
[lForearm addChild:handAndPaper];
lUpperarm.vertexZ = -100;
lForearm.vertexZ = -99;
face.vertexZ = -98;
rUpperarm.vertexZ = -97;
rForearm.vertexZ = -96;
handAndPaper.vertexZ = -95;
This is how I want it to look. (I changed the last line to [self addChild:handAndPaper] which loses lForearm's transformations, not what I want.)
Update 2: Some have suggested I add all children with zOrder set to -1: e.g. [lForearm addChild:handAndPaper z:-1]. This changed things a little, but still didn't fix it, alas. Seems either vertexZ is not determining draw order and/or the blending is wrong.
I dealt with this issue when writing an RPG with Cocos2d. The problem is the alpha blending. As you are seeing, the paper is being covered up by the left arm sprite, even though it is transparent. For some reason, when Cocos2d's vertexZ technique is used, this problem can sometimes occur. To fix it, you can try changing your alpha blending level. Try 0.0, 0.5 and 1.0:
-(void) draw
{
glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GREATER, 0.0f);
[super draw];
glDisable(GL_ALPHA_TEST);
}
If that doesn't work, then I recommend a complete workaround solution. Keep all your sprites as part of the same parent node and use regular z ordering. It's not an ideal solution, but if you use a "meta" parent node then you can still transform all the children easily.
While adding only u can control z-order?
[self addChild:lUpperarm z:1];
[self addChild:lForearm z:2];
[self addChild:face z:3];
[self addChild:rUpperarm z:4];
[self addChild:rForearm z:5];
[lForearm addChild:handAndPaper z:6];
I can't be sure that this is your problem but I've had issues in the past when playing with draw() and it turned out to be that I wasn't resetting the blendfunc at the end of the call.
Here's a draw function I use that does some basic drawing with some transparency. Again, no guarantees.
- (void) draw {
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
ccDrawSolidPoly(vertices, 4, fillColor);
// This is the important bit. Must do this last.
//
glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
}
set higher z value to set object on top. and lower z value to set in back..
I want to set the contentsize of scrollayer.
I have a scrollayer, it's CCLayer type and moving is set by ccTouchMove. I have one schedule for smoothing. BUT.
Problem is that scrolling layer is big like the whole display. I want to set the contentsize of scrollayer. Content in this layer will be scroll and showing ONLY in this layer. Not taking up the whole display. Something like this
Scrolling just in gray CCLayer (scrollayer) ....NOT WHOLE SCREEN.
Can you help me?
P.S.: Setting CCLayerColor and initWithColor:Width:Height: is not working. It just makes some stupid color box and it's moving too.
ok, honestly i would put the window frame at a higher z than the scrolling object ... if you dont you may have to crop and change sprite on the fly for the window content, nasty (at least that is the one way i could do this, without further research).
so :
// initialize this logic somewhere useful
CCNode scrollableContent;
CCSprite windowFrame;
BOOL isScrollPossible;
[self addChild:scrollableContent z:0];
[self addChild:windowFrame z:1];
// and in the touch delegate methods
-(void) ccTouchBegan:{
check if the touch happened in the window, if yes, scrolling is possible
}
-(void) ccTouchMoved:{
if (isScrollPossible) {
compute displacement
compute nextPosition for scrollableContent node;
if ( nextPosition in window ) {
// make scrollableContent follow touch
scrollableContent.position=nextPosition;
} else {
// stop any further scrolling until the next 'touch began'
isScrollPossible=NO;
}
} else {
// scroll not possible, do nothing
}
}
This is the basic idea. You may need clamping logic to prevent the creeping of scrollableContent beyond the edges of the window.
Edited for typos.
After trying desperately with masking and GL_SCISSOR, I settled on cutting a hole in the foreground and only moving the background object when onTouchMoved updated.
To see it in action, have a look at the Stats page of Angry Gran.