Tutorial: Spritesheets mit Texturepacker

Hallo Zusammen,

heute möchte ich euch ein Tool vorstellen, welches uns einen Teil der Programmierarbeit erleichtert: Texturepacker

Mit Texturepacker kann man sogenannte Spritesheets erstellen – das sind mehrere Sprites   in einer Grafik vereint. Und das beste ist, dass die Spritesheets von Cocos2d unterstütz werden. Für alle die keine Grafiken zur Hand haben stelle ich hier einen Satz zur Verfügung:

Grafik eines Zip Ordners

Zu allererst erstellen wir ein neue Cocos2d Projekt, wie zum Beispiel hier beschrieben. Startet nun Texturepacker – ihr müsstet, das folgende Bild sehen.

Wir ziehen nun die Bilder aus dem zipOrdner (oder eure eigenen) rechts in das Spritesheet. Wie ihr seht werden die Bilder automatisch sinnvoll angeordnet. Damit unser Spritesheet zu unserem Projekt passt müssen wir einige Einstellungen vornehmen:

  • Data File: hier muss der Pfad eurer Projektressourcen rein. Auf diese Weise werden spätere Aktualisierungen des Spritesheets automatisch im XCode Projekt verfügbar. Das Data File ist vom Typ .plist und zusätzlich muss an die -hd Endung gedacht werden, da wir ein hd Spritesheet erstellen.
  • Texture File: hier muss ebenfalls der Pfad eurer Projektressourcen rein. Das Texture File ist das eigentliche Spritesheet und benötigt ebenfalls die -hd Endung.
  • Texture Format und Image Format: Für den Moment soll uns PNG und RGB8888 reichen.
  • AutoSD: eine großartige Option. Texturepacker erstellt automatisch das selbe Spritesheet noch mal in SD Qualität. Jeder der schonmal hundert HD Grafiken in SD umwandeln musste wird diese Option lieben. Mir wird das in Zukunft sehr viel Zeit sparen :)
    Drückt auf + um einen neuen Eintrag zu erstellen und stellt den Scale Faktor auf 0.5.

Bei mir sieht es am Ende so aus:

Wir speichern nun das Spritesheet (dieses wird NICHT im Ressourcenordner eures Projektes abgelegt) und drücken anschließend auf Publish. Wechseln wir wieder zurück zu XCode, in der Regel müssen die erstellten Dateien noch XCode über File > Add File to … bekannt gegeben werden.

Wir löschen im XCode Projekt erstmal alle Methoden bis auf scene, init, dealloc und ccTouchesEnded. Im HelloWorldLayer.h ersetzen wir die definierten Attribute mit den folgenden:

@interface HelloWorldLayer : CCLayer 
{	
    NSMutableArray      *_spriteArray;
    CCSpriteBatchNode   *_batchNode;
}

Die BatchNode ist ein zentraler Knoten, der alle Sprites eines Spritesheets beinhaltet. Das Array brauchen wir hingegen nur, um später etwas action auf dem Bildschirm zu haben. Unsere init ist bis auf self.isTouchEnabled = YES; und CGSize s = [[CCDirector sharedDirector] winSize]; leer. Wir ergänzen nun den folgenden Code:

    [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"campusTutorial.plist"];
    _batchNode = [CCSpriteBatchNode batchNodeWithFile:@"campusTutorial.png"];
    [self addChild:_batchNode];

   _spriteArray = [[NSMutableArray alloc] init];

Wir haben jetzt eine batchNode dem aktuellen Layer (self) hinzugefügt. Durch die zusätzlich hinzugefügte plist können wir nun Sprites aus dem Spritesheet erstellen. Dazu definieren wir eine neue Methode addRandomSprite

-(void)addRandomSprite{

    int random = arc4random()%9;
    int xVar = arc4random()%280;
    int yVar = arc4random()%160;

    NSString *name;

    switch (random) {
        case 0:
            name = @"ballerburg_header.png";
            break;
        case 1:
            name = @"cannon.png";
            break;
        case 2:
            name = @"cannonball.png";
            break;
        case 3:
            name = @"feather.png";
            break;
        case 4:
            name = @"heavy.png";
            break;
        case 5:
            name = @"medal.png";
            break;
        case 6:
            name = @"speaker_on.png";
            break;
        case 7:
            name = @"sun.png";
            break;
        case 8:
            name = @"windBag.png";
            break;
        default:
            NSLog(@"invalid Switch Number");
            break;
    }

    CCSprite *tempSprite = [CCSprite spriteWithSpriteFrameName:name];
    tempSprite.position = ccp(xVar+100,yVar+100);
    tempSprite.tag = 1;
    [_batchNode addChild:tempSprite];

    [_spriteArray addObject:tempSprite];
}

In dieser Methode suchen ermitteln wir ein zufälliges Sprite. Anschließend erstellen wir mit spriteWithSpriteFrameName das Sprite, geben ihm eine zufällige Position und fügen es sowohl der BatchNode, als auch dem Array hinzu. Hier gibt es drei Dinge zu beachten:

  • Ihr müsst als Name des SpriteFrames exakt den Namen verwenden, den die Bilder in Texturepacker haben.
  • fügt das Sprite unbedingt zur Batchnode hinzu und nicht dem Layer (self). Andernfalls verliert ihr viele Performancevorteile.
  • ihr könnt nur Sprites zur batchNode hinzufügen, die in dem zugeordneten Spritesheet sind (hier: campusTutorial.png). Wollt ihr mehrere SpriteSheets verwenden, braucht ihr auch mehrere batchNodes

Die Methode addRandomSprite wird nun in ccTouchEnded aufgerufen:

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
	[self addRandomSprite];
}

Anschließend sorgen wir noch für etwas Action:

        // zu init hinzufügen
        [self scheduleUpdate];

-(void) update:(ccTime) delta{
    int counter = 0;

    for (CCSprite* item in _spriteArray) {
        // determine movement direction
        if (counter%2==0) {
            item.position = ccp(item.position.x+item.tag,item.position.y);
            if (item.position.x > 480) {
                item.tag = -1;
            }else if (item.position.x < 0){                 item.tag = 1;             }         } else {             item.position = ccp(item.position.x,item.position.y+item.tag);             if (item.position.y > 360) {
                item.tag = -1;
            }else if (item.position.y < 0){
                item.tag = 1;
            }
        }
        counter ++;
    }
}

Wenn wir jetzt auf Start drücken sehen wir einen dunklen Hintergrund. Durch jeden Touch wird ein neues Sprite hinzugefügt und bewegt sich über den Bildschirm. Ich habe mir noch einen weißen Hintergrund eingefügt.

Bis zum nächsten mal.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.