CartoonSmart student, Nipin has returned from the depths of the ocean to present his War of the Caribbean Pirates app. And he’s got 20 promo codes for free downloads of this wave attack style game (no pun intended). Check out some screenshots first though. Good work, Nipin!
If you all remember how this works, its just a grab bag of codes. Pick one and if it doesn’t work, try another….
Many of you have waited long enough! My video tutorial on Game Center has been uploaded and is now officially a part of the iOS and Cocos2d Tutorial Series/Bundle. What took so long, you might ask??? I dunno, I don’t keep a diary! These things take a while, but I am thorough. In this 2 hour video we look at everything it takes to get your app setup for Game Center integration. We’ll talk about what needs to be done in iTunes Connect to setup an empty Leaderboard (for high scores or low scores) and a new Achievement goal for players (for example, your player collecting 100 coins could be an Achievement). Then in Xcode we will create a singleton class to manage showing Leaderboards, Achievements, Friend Invites and everything else involved with authenticating local players. And of course the real action begins when we submit scores and new achievements (or percentages of achievements) to Game Center. We’ll also create NSUserDefault variables to store past scores or achievements just in case there’s an error reporting either one, for example if someone lost internet connectivity.
If you already bought this course, you should already have a brand-spankin’ new set of download links.
Also if you bought our PhoneGap and Dreamweaver CS5.5 / CS6 Tutorial Series, the final app has been uploaded (which you know already too because of the download link sitting in your inbox). Our instructor Lawrence added an Xcode based project featuring 5 of the API’s taught in the course. As you can see below, the app has five buttons on the bottom which navigate to:
Contact Window: with buttons to trigger a text, phone call or email
Voice Recorder: Playback a sound file you’ve recorded through the app
YouTube Video Playlist / Player: Create a playlist of your favorite YouTube Videos
Image Capture App: Take a picture from the device’s camera and insert it within another image. This could be the foundation of an amazing application. Perhaps a kid’s book featuring the child reading the book.
So I’m still working on my Cocos2D iBook (partially available here) , and I started looking around for a nice example page of some of the cooler 3D and Tile Effects CCAction’s that Cocos2D offers, and I came up a bit short. So what the heck, I might as well give the internet what I was looking for a couple days ago.
Because I can’t just test things like normal people on a simple image, I started by making this project….
Don’t get too excited, I wish this was a real game too. Dirty bombs, poison darts, Acme-style TNT. It’s quite a weapons board. Each icon is a separate CCSprite, and by touching each one it will run a different CCAction. I won’t go into all that code, but the finished example project is zipped up here (for Cocos2d v1) and here (for Cocos2d v2) if you want to peek at it.
If you want to follow along with your own project and test out some of these actions, then you’ve probably already got Cocos2D setup and are working from the usual starting template which has an AppDelegate.m file. Find that, and scroll down to where the glView is created and change the pixelFormat parameter to what you see below….
Done? Good. That makes these actions look much better (as in you won’t see black around them) And if you’re using Cocos2d v2, you’ll need to comment out…
Let’s get started with CCShaky3D , which animates a shaky effect. For all these examples, I’ll run them with a CCRepeatForever action just so they keep playing for a while.
Let’s pick apart that first line, actionWithRange is basically just the intensity of the effect. Lower that number to 1 and you’ll barely notice the effect. Raise it up and you’ll see the effect get even crazier. Then shakeZ is a bool parameter which enables the effect on the z axis. I set it to NO because I didn’t notice a major change. The duration parameter is obviously the number of seconds. If you plan on repeating the action forever you might wonder why you would set the duration very long at all, but when the action loops it is sometimes noticeable, so you might want to set a high duration for that reason.
Finally the big thing to talk about is the grid. Every time I read that, I can hear Jeff Bridges from Daft Punk’s TRON:Legacy soundtrack saying “The Grid”. So if you want to set the mood for these examples, skip to Track 2 on the album. Most of these Actions ask for a grid setting, and I’ve found 20 by 20 runs smoothly and plays the effect in a believable way. In other words, I don’t notice The Grid. So what is the grid? What does it look like? “Ships, motorcycles?”. Nope. it’s just squares. In fact, if you hadn’t adjusted your AppDelegate.m file, you will come face to face with The Grid just like I did when I took this screenshot below.
All those black squares won’t be there if your pixelFormat is kEAGLColorFormatRGBA8, but this provides a great example of The Grid. If you were to count the number of squares from left to right and top to bottom it would be 20 and 20.
Now most of these Actions don’t show The Grid as noticeably as this particular tile effect in the screengrab, but they do break the scene down into square chunks to bend and play with. So the fewer squares in your grid the
more clunky the effect will be. But the more you use, the more resource intensive the action is. So again, I found that 20, 20 is a good starting point, and then you can tweak the effect as you like.
Continuing on, let’s look at the CCWaves and CCWaves3D actions.
As you can see these are pretty similar. Adjust the actionWithWaves or amplitude parameters to change the number of waves in the duration and intensity. The CCWaves3D action appears much smoother to me and more like a waving flag.
Next up, let’s look at CCFlipX3D and CCFlipY3D, these are so similar I’ll just show you the X version. In the example code below (and video example) , I’m running a reverse action in the sequence to send the weapon icon back in place. Then it repeats endlessly.
Since this action is creating a ripple and bending the object around that, it is asking for a position and radius for the ripple. You could use any location or size radius, but I’m using the weapon.position and weapon.contentSize.width (the sprite’s location and width). The other parameters are similar to the previous actions, I changed the grid to 40 by 40 for a smoother effect.
Again, I’m using the center of the weapon icon for the actionWithPosition parameter. The twirls parameter is how many times the object will twirl in the given duration and the amplitude changes the intensity as usual.
My second favorite, CCLiquid creates a fun watery effect.
Experiment with the number of waves and amplitude to your liking.
Next, let’s combine a few actions into one sequence. The sequence moves like a wave, shakes at 3 different settings, then does two fade out effects (one starting from the bottom left, the other from the top right)…
CCWavesTiles3D* tileWaves = [CCWavesTiles3DactionWithWaves:3 amplitude:15 grid:ccg(20,20) duration:5] CCShakyTiles3D* shaky = [CCShakyTiles3DactionWithRange:4 shakeZ: YES grid:ccg(20,20) duration:1.0]; CCShakyTiles3D* shaky2 = [CCShakyTiles3DactionWithRange:10 shakeZ: YES grid: ccg(20,20) duration:1.0]; CCShakyTiles3D* shaky3 = [CCShakyTiles3DactionWithRange:20 shakeZ: YES grid: ccg(20,20) duration:1.0]; CCFadeOutBLTiles* tileEffect = [CCFadeOutBLTilesactionWithSize: ccg(20,20)
duration:2.0]; //tiles fade from the Bottom Left “BL” id reverseTiles = [tileEffect reverse]; //reverse the previous action CCFadeOutTRTiles* tileEffect2 = [CCFadeOutTRTilesactionWithSize: ccg(20,20)
duration:2.0]; //tiles fade from the Top Right “TR” id reverseTiles2 = [tileEffect2 reverse]; //reverse the previous action CCSequence* sequence = [CCSequenceactions: tileWaves, shaky, shaky2, shaky3, tileEffect, reverseTiles, tileEffect2, reverseTiles2, nil ]; CCRepeatForever* repeat = [CCRepeatForeveractionWithAction: sequence];
[weapon runAction: repeat];
Finally, here’s one more sequence of tiled actions. This time you’ll see a jump effect, quick shattering, shuffle (which moves the tiles across the screen and back again using the reverse action), column split, row split, and two more fade effects (which look like window blinds closing).
The final video of Session 4 of our iOS and Cocos2D tutorial series is now available! In this video we modify our previous project in the session to create a gravity-less Box2D maze environment. Okay, obviously you can see from the image above its a mini Pac-man level. The fun things we explore in this tutorial…
Applying force to move the character around the level in up, down, left, or right directions
Adding a ContactListener to detect collisions between the character and maze boundaries
Adding 4 sensors arounds our character to detect when openings in the maze are available
Programming a virtual swipe joystick to move in available directions and store a desired direction which allows the character to move into openings only when possible
Jumping the character from one side of the screen to the other.
Stopping movement completely (and pausing the mouth opening animation)
Applying different types of force to the character to experiment with spin
Sounds awesome right. Here’s the rub. I’m having some troubles this morning sending out a bulk of updated download links to the course, so if you’re reading this, you can just return to any of your past download links pages and request an additional download. Otherwise, I’m sure the problem will be resolved soon and I’ll be able to blast out an update to everyone.
ALSO if you bought this course with the Starter Kits included, the Angry Ninjas kit has been updated for the iPad 3!
Well I slept past the early store openings today so there goes my chances of getting an iPad 3 today (or for weeks probably). But I think I’ve got the Angry Ninjas iOS Starter Kit retina-fied for the new iPad. It was actually pretty easy, what took a while was upgrading to Lion and installing the latest Xcode to Simulate the iPad 3. So a win for Apple, they finally got me to upgrade.
For those curious, here’s what need updating in the Kit. The Starter Kit builds a universal app, so the Box2D objects all had a non-hd and -hd graphic already. The iPad 1 & 2 were using the non-hd versions (instead of a separate -ipad version). So in upgrading for the iPad 3, I just kept things as is basically. Both Retina iPhone and iPad use the same -hd graphics.
The only thing that really needed work was in places where I was using separate -ipad saved graphics. So now in TheMenu class there’s also -ipad-hd graphics for the buttons that unlock or lock the level sections.
She’s finally ready! Which some of you past buyers know already because you hopefully got the project file links a couple days ago. The videos guides are also available now, so be sure you download those as well.
So yes, its done ! This latest Starter Kit was a fun one to make, and as usual I got a bit carried away making it better then originally planned, and also making it easier to customize for you guys. One of the things I spent some time on at the very end was going back and adding some simpler code for preset vector definitions for shapes you could use in your stack. And the stack is of course the meat of your level. So you can easily add these shapes…
Circles
Squares / Rectangles
Triangles / Right Triangles
Parallelograms
Trapezoids
Hexagons
Octagons
Pentagons
And that image above shows the exact code to create and add a new stack object to your level. I’ve highlighted where you define the image name to use (no need to add the file extension) and where it says usePentagon that will end up telling Box2D to make a pentagon collision shape for the object.
Other properties you might notice…
breaksOnGround – YES or NO whether or not the object will break when it hits the ground
breaksFromNinja – YES or NO whether or not the object will break when a ninja hits it
hasAnimatedBreakFrames - YES or NO whether or not to play a 10 frame animation of the object falling apart (you’ll need to animate that yourself )
damagesEnemy - YES or NO whether or not the object can cause damage to enemies
density – how dense the object is, higher numbers make it more dense
angleChange – change the angle from 0 to 360 degrees.
makeImmovable - YES or NO whether or not the object is static or dynamic. Static objects won’t ever move
points – how much the object scores if it is breakable.
simpleScoreVisualFXType - right now the template has three options breakEffectSmokePuffs, breakEffectExplosion, or breakEffectNone . If you choose either of the first two values, when the object breaks it will play an animation over top of the image of a sequence of either smoke puffs or an explosion. You can add as many other break effect animations as you want. These are a much simpler way of showing the object break apart because it doesn’t require adding a custom animation for each specific object. But you can do both if you want.
And the Enemy class is pretty similar to the StackObject class. The only big difference is that the Enemy can have a damage factor and separate frames to show a progression of damage inflicted. So the first collision against an enemy could show a bandage on it. Then the next collision could kill the enemy. The amount of damage it takes to kill an enemy is up to.
Sooooooo…. I think I’ll leave the rest up to the sales page to fill you in on all the other fun features.
This Starter Kit has two purchasing options. Either a Personal License or Developer License. If you want to make a game for yourself or your own company, the personal license is fine. If you want to build a game for a client using this template, then you need to purchase the Developer License (you’ll pass the cost onto them). Both options are available here. Just remember with both licenses we do expect you to modify most of the artwork to make the game unique to yourself or the company you are developing for. So replace the ninjas with something else and add new background art.
And if you want to purchase the Personal License version of this kit with our iOS App Development course AND get 2 of our other Starter Kits, you can visit this page.
Jeremy Hicks’ new lesson is finally here! We teased it a few weeks back by uploading a lengthy preview on Vimeo , so our apologies to anyone waiting patiently for a while. But the wait was worth it, I think. He’s put 10 hours of screen time into this, and MORE is coming. At least one more lengthy session will be emailed to early buyers, and if you all have any suggestions or questions on things you’d like to see in the final session, go for it.
Using Texture Packer to create sprite sheets in Flash
Converting the JSON output from Texture Packer to an Actionscript 3 object
Texture Map for reading in the converted JSON object from Texture Packer as an Actionscript 3 object of coordinates
Building the Image Class
Creating Vector Objects, an optimized array to use less memory in the processor at run-time
Good coding habits for clearing out references to prevent memory leaks
Animation Classes that extend the Image Class for frame sequences
Learn alternatives to Event Listeners to reduce CPU overhead and possible memory leaks
Use Resource Loader to manage references so you only have one copy of a resource in memory
Application Model Class, all of the application’s core data will go in this class to reduce replication and runaway code
Entity Class, built off the Animation Class
Extending the Entity Class for the Ninja and Enemy Class
Moving enemies across the screen
Object Pooling with the Enemy Pool
When to use Timers vs Enter Frame
Collision detection
User interaction
Keeping score
How to deploy the Flash project to the iPhone for a true test of the memory usage and frame per second rates.
And if you’re wondering, why bother to optimize your Flash code? Well Jeremy learned the hard way that exporting a Flash project to the iPhone isn’t so smooth at first. The frame rate can be pretty clunky without optimizing things. But after going to hell and back to learn everything he’s teaching us, his Flash-to-iOS app, Yin the Master of Yo, is available in the App Store and running very fast. Its also a great game!
And for the first 25 buyers of this course you’ll get a free promo code to download the game.
For those curious how the final project for session 4 of my iOS App Dev Course is coming along. Still to-do: Enemies to sling at and scoring. I’ll teach a lengthy tutorial and make a Starter Kit out of this when its all done…
…you’ve already been emailed new links if you bought this Starter Kit or the iOS Development Series . The second Xcode template is now a spaceship type shooter game. So it adds a scrolling background, particle effect, more enemies, and a few other slight mods to the code.
Also I JUST found out (like 10 minutes ago) my first student has got an app in the store using this template. Congrats Derek! Here’s a link to Wizard Warz
If you’ve already bought my iOS 6-Session tutorial course, your download link page now has a new zip for this Starter Kit. It includes many overview videos explaining how to setup this ebook (which you already knew if you watched the previous session courses) but it also includes some extra videos which cover sound fx, buttons, and particle FX. All things that can be used to tell your App Reviewer that your book is worthy of inclusion in the actual App Store (or they may tell you to rebuild it as an iBookStore product)
And if you’re not interested in learning much about XCode but you want to build an iOS Ebook, well here ya go! You can now purchase this EBook StarterKit and only learn what you need to know to get in the store. For the most part, the guide videos are pretty short, and the initial setup is darn easy (just replace the existing images “page1.png, page2.png”, and so on ). So yes, this is definitely for beginners to XCode and app submission. Just be sure you’ve got a Mac to develop on!
And that image above shows the exact code to create and add a new stack object to your level. I’ve highlighted where you define the image name to use (no need to add the file extension) and where it says usePentagon that will end up telling Box2D to make a pentagon collision shape for the object.
