A fast, easy to use, free, and community supported 2D game engine
Hi,
I'm trying to port my multi column table view which i've written for UIKit before. So far, I implemented UIScrollView-like scroll view. If you are interested in this. Please go to http://drp.ly/17RJdR download and test it on devices. (I'd be much appreciated if you can write a custom test code.) That would help me much. Thanks.
I just finished the first draft of all classes I wanted to write initially.
CCScrollView (UIScrollView like interface, use): You need to change CCNode's visit: method. I couldn't find a way to avoid this modification. beforeDraw: and afterDraw: are added so that I could use clipping planes to make visible boundary for scroll view.
CCTableView (UITableView like interface, use): Currently, delegate for this class does only touch-up detection on a cell. for 100% of its lifetime, it holds the number of cells that are shown in its visible bounds. (just like UITableView) In other words, all cells are re-used when needed. it also supports horizontal and vertical scrolling so that no rotation of sprite itself is needed when side-scrolling is required. You need to manage backend data (i.e., CCSprite for caching) by yourself. A cell is just a link to CCNode to CCTableView. You may want to choose not to cache backend data. Then, it will be released as soon as it's out of sight.
CCMultiColumnTableView: it adds multiple column support so we can create a level board or something. You don't have to do anything extra it automatically find max. number of columns, etc. Use it as CCTableView, but have more viewSize so that cells can be located in multiple columns.
Only problem I can see is that you place cells from bottom, left corner to top, right corner, which is opposite to UITableView. But, I think this is usable still if you need one like this.
Okay, wow. I was just about to sit down to write something extremely similar. Thanks for the awesome!
robodude666
Member
I love you :).
Spent the last 5 hours trying to make my own scrollable table list with fancy Applesque momentum scrolling and snapping. Got the scrolling/snapping down but now that I'm up to filling the layer with table cells it's getting all over the place. Code isn't clean and very hacky.
Looked at your implementation again and said "aww, screw it" :P. It does everything I need and a kitchen sink or two.
Cheers,
-robodude666
Jinno
Member
Thanks a lot! This is a really good implementation, and the examples are really clear cut for all the uses it can have. :P
I'm having a little trouble implementing it, though. I can get the cells to show up and scroll, and show the images that I tell them to. Everything is fine there. Basically I've just been hacking at the default box2d example, and added this TableView to it on another layer, so that I could spawn an object based on what index was pressed. But the table view isn't reporting the table cell that was touched (and the CCLOG comment is still there, so it should be). The touch just goes down and is still handled by the base layer.
I essentially copied the exact code of your TableViewScene and changed the size of the cells.
'#import "ObjectTableView.h"
#import "objectCell.h"
#import "CCTableViewCell.h"
@implementation ObjectTableView
-(id)init {
if((self = [super init])){
NSAutoreleasePool *pool = [NSAutoreleasePool new];
CGSize winSize = [[CCDirector sharedDirector] winSize];
CGSize cSize = CGSizeMake(64,64);
buildObjects = [[CCTableView tableViewWithDataSource:self size:CGSizeMake(winSize.width, cSize.height)] retain];
buildObjects.direction = CCScrollViewDirectionHorizontal;
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"sprites.plist"];
buildObjects.position = ccp(0.0,0.0);
[self addChild:buildObjects z:1];
[buildObjects reloadData];
[pool drain];
}
return self;
}
#pragma mark -
#pragma mark TableView Delegate
-(void)table:(CCTableView *)table cellTouched:(CCTableViewCell *)cell {
CCLOG(@"cell touched at index: %i", cell.idx);
}
#pragma mark -
#pragma mark TableView DataSource
-(Class)cellClassForTable:(CCTableView *)table {
return [objectCell class];
}
-(CCTableViewCell *)table:(CCTableView *)table cellAtIndex:(NSUInteger)idx {
CCTableViewCell *cell;
NSString *spriteName;
CCSprite *sprite;
idx = idx%5;
cell = [table dequeueCell];
spriteName = [NSString stringWithFormat:@"cell%i.png", idx%10];
sprite = [CCSprite spriteWithSpriteFrameName:spriteName];
if (!cell) {
cell = [[objectCell new] autorelease];
}
cell.node = sprite;
return cell;
}
-(NSUInteger)numberOfCellsInTableView:(CCTableView *)table {
return 100;
}
-(void) dealloc {
[buildObjects release];
[super dealloc];
[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];
}
@end'And then I added it to the box2D scene in init like this
#import "towerGameScene.h"
#import "ObjectTableView.h"
//Pixel to metres ratio. Box2D uses metres as the unit for measurement.
//This ratio defines how many pixels correspond to 1 Box2D "metre"
//Box2D is optimized for objects of 1x1 metre therefore it makes sense
//to define the ratio so that your most common object type is 1x1 metre.
#define PTM_RATIO 32
// enums that will be used as tags
enum {
kTagTileMap = 1,
kTagSpriteSheet = 1,
kTagAnimation1 = 1,
};
// HelloWorld implementation
@implementation towerGame
+(id) scene
{
// 'scene' is an autorelease object.
CCScene *scene = [CCScene node];
// 'layer' is an autorelease object.
towerGame *layer = [towerGame node];
// add layer as a child to scene
[scene addChild: layer z:1];
// return the scene
return scene;
}
// initialize your instance here
-(id) init
{
if( (self=[super init])) {
// enable touches
self.isTouchEnabled = YES;
// enable accelerometer
self.isAccelerometerEnabled = YES;
CGSize screenSize = [CCDirector sharedDirector].winSize;
CCLOG(@"Screen width %0.2f screen height %0.2f",screenSize.width,screenSize.height);
CCSprite *bgLayer = [CCSprite spriteWithFile:@"background.png"];
bgLayer.position = ccp(160, 240);
[self addChild:bgLayer z:0];
CCSprite *drawerLayer = [CCSprite spriteWithFile:@"drawerBack.png"];
drawerLayer.position = ccp(screenSize.width/2, 32);
[self addChild:drawerLayer z:2];
[self addChild:[ObjectTableView node] z:3];
// Define the gravity vector.
b2Vec2 gravity;
gravity.Set(0.0f, -10.0f);
// Do we want to let bodies sleep?
// This will speed up the physics simulation
bool doSleep = true;
// Construct a world object, which will hold and simulate the rigid bodies.
world = new b2World(gravity, doSleep);
world->SetContinuousPhysics(true);
// Debug Draw functions
// m_debugDraw = new GLESDebugDraw( PTM_RATIO );
// world->SetDebugDraw(m_debugDraw);
// uint32 flags = 0;
// flags += b2DebugDraw::e_shapeBit;
// flags += b2DebugDraw::e_jointBit;
// flags += b2DebugDraw::e_aabbBit;
// flags += b2DebugDraw::e_pairBit;
// flags += b2DebugDraw::e_centerOfMassBit;
// m_debugDraw->SetFlags(flags);
// Define the ground body.
b2BodyDef groundBodyDef;
groundBodyDef.position.Set(0, 0); // bottom-left corner
// Call the body factory which allocates memory for the ground body
// from a pool and creates the ground box shape (also from a pool).
// The body is also added to the world.
b2Body* groundBody = world->CreateBody(&groundBodyDef);
// Define the ground box shape.
b2PolygonShape groundBox;
// bottom
groundBox.SetAsEdge(b2Vec2(0,0), b2Vec2(screenSize.width/PTM_RATIO,0));
groundBody->CreateFixture(&groundBox,0);
// top
groundBox.SetAsEdge(b2Vec2(0,screenSize.height/PTM_RATIO), b2Vec2(screenSize.width/PTM_RATIO,screenSize.height/PTM_RATIO));
groundBody->CreateFixture(&groundBox,0);
// left
groundBox.SetAsEdge(b2Vec2(0,screenSize.height/PTM_RATIO), b2Vec2(0,0));
groundBody->CreateFixture(&groundBox,0);
// right
groundBox.SetAsEdge(b2Vec2(screenSize.width/PTM_RATIO,screenSize.height/PTM_RATIO), b2Vec2(screenSize.width/PTM_RATIO,0));
groundBody->CreateFixture(&groundBox,0);
//Set up sprite
CCSpriteSheet *sheet = [CCSpriteSheet spriteSheetWithFile:@"sprites.png" capacity:8];
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"sprites.plist"];
[self addChild:sheet z:0 tag:kTagSpriteSheet];
[self addNewSpriteWithCoords:ccp(screenSize.width/2, screenSize.height/2)];
CCLabel *label = [CCLabel labelWithString:@"Tap screen" fontName:@"Marker Felt" fontSize:32];
[self addChild:label z:0];
[label setColor:ccc3(0,0,255)];
label.position = ccp( screenSize.width/2, screenSize.height-50);
[self schedule: @selector(tick:)];
}
return self;
}
-(void) draw
{
// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
// Needed states: GL_VERTEX_ARRAY,
// Unneeded states: GL_TEXTURE_2D, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
world->DrawDebugData();
// restore default GL states
glEnable(GL_TEXTURE_2D);
glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
}
-(void) addNewSpriteWithCoords:(CGPoint)p
{
CCLOG(@"Add sprite %0.2f x %02.f",p.x,p.y);
CCSpriteSheet *sheet = (CCSpriteSheet*) [self getChildByTag:kTagSpriteSheet];
b2PolygonShape dynamicBox;
b2CircleShape circle;
BOOL isCircle = FALSE;
b2FixtureDef fixtureDef;
int randInt = arc4random() % 5;
CCLOG(@"randInt = %d",randInt);
//TODO: Make this work as a switch without the b2Vec2 initialization error.
CCSprite *sprite;
if(randInt == 0){
//Object initialization
}
else if(randInt == 1){
//Object initialization
}
else if(randInt == 2){
//Object initialization
}
else if(randInt == 3){
//Object initialization
}
else{
//Object initialization
}
// Define the dynamic body fixture.
if(isCircle){
fixtureDef.shape = &circle;
}
else {
fixtureDef.shape = &dynamicBox;
}
[sheet addChild:sprite];
sprite.position = ccp( p.x, p.y);
// Define the dynamic body.
//Set up a 1m squared box in the physics world
b2BodyDef bodyDef;
bodyDef.type = b2_dynamicBody;
bodyDef.position.Set(p.x/PTM_RATIO, p.y/PTM_RATIO);
bodyDef.userData = sprite;
b2Body *body = world->CreateBody(&bodyDef);
body->CreateFixture(&fixtureDef);
}
-(void) tick: (ccTime) dt
{
//It is recommended that a fixed time step is used with Box2D for stability
//of the simulation, however, we are using a variable time step here.
//You need to make an informed choice, the following URL is useful
//http://gafferongames.com/game-physics/fix-your-timestep/
int32 velocityIterations = 8;
int32 positionIterations = 1;
// Instruct the world to perform a single step of simulation. It is
// generally best to keep the time step and iterations fixed.
world->Step(dt, velocityIterations, positionIterations);
//Iterate over the bodies in the physics world
for (b2Body* b = world->GetBodyList(); b; b = b->GetNext())
{
if (b->GetUserData() != NULL) {
//Synchronize the AtlasSprites position and rotation with the corresponding body
CCSprite *myActor = (CCSprite*)b->GetUserData();
myActor.position = CGPointMake( b->GetPosition().x * PTM_RATIO, b->GetPosition().y * PTM_RATIO);
myActor.rotation = -1 * CC_RADIANS_TO_DEGREES(b->GetAngle());
}
}
}
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
//Add a new body/atlas sprite at the touched location
/*for( UITouch *touch in touches ) {
CGPoint location = [touch locationInView: [touch view]];
location = [[CCDirector sharedDirector] convertToGL: location];
[self addNewSpriteWithCoords: location];
}*/
}
- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration
{
static float prevX=0, prevY=0;
//#define kFilterFactor 0.05f
#define kFilterFactor 1.0f // don't use filter. the code is here just as an example
float accelX = (float) acceleration.x * kFilterFactor + (1- kFilterFactor)*prevX;
float accelY = (float) acceleration.y * kFilterFactor + (1- kFilterFactor)*prevY;
prevX = accelX;
prevY = accelY;
// accelerometer values are in "Portrait" mode. Change them to Landscape left
// multiply the gravity by 10
b2Vec2 gravity( -accelY * 10, accelX * 10);
world->SetGravity( gravity );
}
// on "dealloc" you need to release all your retained objects
- (void) dealloc
{
// in case you have something to dealloc, do it in this method
delete world;
world = NULL;
delete m_debugDraw;
// don't forget to call "super dealloc"
[super dealloc];
}
@endWith a background behind the TableView so that there's visual separation.
It's probably something simple that I'm missing, but if you have any insight as to what I might not be doing I would greatly appreciate it. :D
Thanks,
Jinno
jrhee
Member
This is great, thanks a ton! I'm noticing though that while the clipping works correctly on the simulator, it's not working on my device. For example, in the screenshots provided, on the simulator, the zero in the left-most column is clipped halfway through as it should be. On my device (3g, 3.1.3), the entire zero frame is displayed. Any ideas how this can be fixed?
Simulator:
Device:
I've just been messing around with the code posted to the front page and found an issue (forgive me if this has been fixed in the code posted here). Currently in CCScrollView the touch delegate is added manually but is never removed, this can cause crashes.
Original code:
-(id)initWithViewSize:(CGSize)size {
if ((self = [super init])) {
self.container_ = [CCLayer node];
self.viewSize = size;
isEnabled = YES;
delegate_ = nil;
bounces_ = YES;
clipToBounds_ = YES;
container_.contentSize = CGSizeZero;
direction_ = CCScrollViewDirectionBoth;
container_.position = ccp(0.0f, 0.0f);
[self addChild:container_];
[[CCTouchDispatcher sharedDispatcher] addStandardDelegate:self priority:0];
}
return self;
}Since CCScrollView is a subclass of CCLayer though it's a very easy fix. CCLayers can handle touches normally you just need to set touches enabled during the init, like so:
-(id)initWithViewSize:(CGSize)size {
if ((self = [super init])) {
self.container_ = [CCLayer node];
self.viewSize = size;
isEnabled = YES;
delegate_ = nil;
bounces_ = YES;
clipToBounds_ = YES;
container_.contentSize = CGSizeZero;
direction_ = CCScrollViewDirectionBoth;
container_.position = ccp(0.0f, 0.0f);
[self addChild:container_];
[self setIsTouchEnabled:YES];
}
return self;
}I found this as well. I guess you're running on an older device like me (older iPod Touch). Some of the older hardware only supports 1 clipping plan in Opengl ES, and the new hardware supports 6 (or maybe more, not sure).
What we had to do was resort to using glScissors to clip the area we wanted. The code is kind of a hack right now since it only works in a specific landscape mode, but you might be able to figure out what you need if you want to support a different orientation.
Get rid of all the glClip stuff in CCScrollView and replace with glScissors stuff like so:
-(void)beforeDraw {
if (clipToBounds_) {
glEnable(GL_SCISSOR_TEST);
CGPoint windowPosition = [parent_ convertToWindowSpace:self.position];
glScissor(windowPosition.x, [[UIScreen mainScreen] bounds].size.height-windowPosition.y,
viewSize_.height, viewSize_.width);
}
}
/**
* retract what's done in beforeDraw so that there's no side effect to
* other nodes.
*/
-(void)afterDraw {
if (clipToBounds_) {
glDisable(GL_SCISSOR_TEST);
}
}Saim, thanks for sharing this great code... anyway, when I try to implemented the code... I got an error in the CCScrollView.m
//CCAssert(NO, @"CCScrollView: DO NOT initialize CCScrollview directly."); //
it said implicit delacration of function CCAssert... but if I comment it, it works just fine, but still i feel something is wrong...
Anyone had the same problem and solution? sorry for my noob question...
thanks in advance....
ly_study
Member
@jrhee
I encounter the same problem like you. Can you send the correctly code the me?
My email is yuluo77@hotmail.com.
Thank you!
CCAssert is included in CCDebug.h which I use for my projects. You can either include the file or refactor CCLog and CCAssert to NSLog and NSAssert. It's just a simple macro to turn on and off logging and assertion for different builds. depending on device/simulator, debug/release settings. Apparently, I really don't have time to maintain the code T_T I'm still working on my next game, planning and making assets. Thanks all for trying the code and reporting the problems in the blog comments and here. I will try to improve the code later! :)
This topic is a little bit old now, but my glScissor stuff broke with the new 0.99.4. I think probably because the eaglview is now created differently so the math I'm doing for glScissor is wrong now.
Anyone have some updated code that works for them with 0.99.4?
edit: OK, nevermind. It seems the code I posted still works. We had some intermediate changes from the code posted here, and that is the code that actually broke. No cause for alarm!
I thought I would take a look at this for something I am doing, but it would seem it has issues in portrait mode. The vertical goes from the bottom up as number one rather than the top being one. You have to start by scrolling down, which is not intuitive.
So it needs to be reversed in the drawing. Has anyone modified the code already to put the first item at the top when in portrait?
Thanks.
fhuiseog
Member
Thanks saim80 for sharing this. Got rid of beforeDraw and afterDraw for 0.99.4 and override visit instead:
See this topic.
- (void) visit
{
if (!self.visible)
return;
glPushMatrix();
glEnable(GL_SCISSOR_TEST);
CGSize size = [[CCDirector sharedDirector] winSize];
CGRect scissorRect = self.boundingBox;
scissorRect.size.width = viewSize_.width;
scissorRect.size.height = viewSize_.height;
// transform the clipping rectangle to adjust to the current screen
// orientation: the rectangle that has to be passed into glScissor is
// always based on the coordinate system as if the device was held with the
// home button at the bottom. the transformations account for different
// device orientations and adjust the clipping rectangle to what the user
// expects to happen.
ccDeviceOrientation orientation = [[CCDirector sharedDirector] deviceOrientation];
switch (orientation) {
case kCCDeviceOrientationPortrait:
break;
case kCCDeviceOrientationPortraitUpsideDown:
scissorRect.origin.x = size.width-scissorRect.size.width-scissorRect.origin.x;
scissorRect.origin.y = size.height-scissorRect.size.height-scissorRect.origin.y;
break;
case kCCDeviceOrientationLandscapeLeft:
{
float tmp = scissorRect.origin.x;
scissorRect.origin.x = scissorRect.origin.y;
scissorRect.origin.y = size.width-scissorRect.size.width-tmp;
tmp = scissorRect.size.width;
scissorRect.size.width = scissorRect.size.height;
scissorRect.size.height = tmp;
}
break;
case kCCDeviceOrientationLandscapeRight:
{
float tmp = scissorRect.origin.y;
scissorRect.origin.y = scissorRect.origin.x;
scissorRect.origin.x = size.height-scissorRect.size.height-tmp;
tmp = scissorRect.size.width;
scissorRect.size.width = scissorRect.size.height;
scissorRect.size.height = tmp;
}
break;
}
glScissor(scissorRect.origin.x, scissorRect.origin.y,
scissorRect.size.width, scissorRect.size.height);
[super visit];
glDisable(GL_SCISSOR_TEST);
glPopMatrix();
}The fix is updated for 0.99.5.3.. Also there is a minor addition people should be aware of..
I have added another event:
-(void)cellRemoved:(CCTableView *)table Removed:(CCTableViewCell *)cell;
So you will need to add that event to your table code:
-(void)cellRemoved:(CCTableView *)table Removed:(CCTableViewCell *)cell {
//NSLog(@"cellRemoved = %d",cell.idx);
}Download the update from:
http://www.zarksoft.com/CCTables.zip
If you have any questions or issues let me know and I'll see what I can do.
Edit:
There is another issue, which I brought up about CCNode.m.. The node transforms are wrong that this library uses... Has to do with points and pixels.. You can either change it in CCNode.m, or add your own code for it until the next release of cocos:
CCNode.m changes:
#ifdef __IPHONE_OS_VERSION_MAX_ALLOWED
- (CGPoint)convertTouchToNodeSpace:(UITouch *)touch
{
CGPoint point = [touch locationInView: [touch view]];
point = [[CCDirector sharedDirector] convertToGL: point];
return [self convertToNodeSpace:ccp( point.x * CC_CONTENT_SCALE_FACTOR(), point.y * CC_CONTENT_SCALE_FACTOR())]; //point];
}
- (CGPoint)convertTouchToNodeSpaceAR:(UITouch *)touch
{
CGPoint point = [touch locationInView: [touch view]];
point = [[CCDirector sharedDirector] convertToGL: point];
return [self convertToNodeSpaceAR:ccp( point.x * CC_CONTENT_SCALE_FACTOR(), point.y * CC_CONTENT_SCALE_FACTOR())];
}
patgoto
Member
Hi all,
overidding visit worked for me on iphone 3G but does not work great on iphone 4 with high res so i'm using glClipPlanef on iphone 4 and iPad.
I tried multiplying width and height of the scissor rect by contentScaleFactor but i'm still missing the top part of my scrollview so i'm using glClipPlanef instead on this device.
Does someone knows what about iphone 3GS? does it supports at least 4 glClipPlanef?
Thanks,
Repeating Verisutha's 2 months old question:
Has anyone modified the code already to put the first item at the top when in portrait?
Thanks :)
Oh, also @patgoto: overriding the visit method like fhuiseog said worked for me on an iPod Touch 4, I haven't tested on an iPhone 3GS though.
sanzochan
Member
One thing I realized about the cells is that they're added on top. I have an index I want to do (eg. cover, page 1, page 2) but instead of appearing like this:
Cover
Page 1
Page 2
It appears like this:
Page 2
Page 1
Cover
Is there a way to rectify it? My application is landscape based, so I'm not sure about the portrait codes that Verisutha and purplelilgirl mentioned. Did I accidentally miss it? I'm using the version that I downloaded from the Cocos2D archives.
You must log in to post.
