XCode Tutorials for Beginners

Everything that has a beginning, has an end.

noreply@blogger.com (GeneCode) — Fri, 01 Nov 2024 05:18:00 +0000

2009-2024 is a long time, but I had fun. I have made some 47 apps that was released in the app store during that time. I'd say, in the beginning, the Apple's App Store was a cool place for individual software developers with any ideas. Some crazy ideas, some noble and outstanding ideas, and even stupid ideas, could sell.

In my final blog post as an iOS Indie Developer, I will reminisce my experience as the solo iOS developer through out the 15 years.

In 2009, I have just quit a steady job of 8 years at a prestigious audio-video electronics product manufacturing company as an R&D Engineer. The company unfortunately has been suffering financially for a few years, due to the transitioning state of technology.

People no longer are buying Hi-Fis. They no longer appreciate sound quality but instead they are more interested in quality visuals such as LCD and Plasma. As for sound, as long as you have speaker, that's good enough.

So after I quit the job I tried to find other jobs but to no avail. There are bills to pay and family to feed. Then a friend of mine shared a newspaper clip about a boy in Singapore that sold thousands copies of iOS app. I was intrigued and immediately bought a second hand Macbook White to try and develop apps.

At that time, coding resources are not abundant like today. It was a bit hard to learn anything. Back in 2009, I only knew Lazarus/Pascal and simple Bash script. So to learn Objective-C to develop iOS app was a challenge.

Nevertheless, stackoverflow helped and of course THE iOS developer forum back then, the iPhoneDevSDK.com. A lot of us hanging out there were indie developers, and we helped each other where we can. Of course, it was still a competition, so coding help can be a little restricted because we don't want to teach others to be our own app's competitor lol.

The best thing about iOS dev back then in 2009 is the simplicity of XCode. Steve Jobs is a genius for this reason. He made tools that are so easy to use. Install XCode and you're all set to create your first app. There are no dependencies to install, no frequent updates, and simulator works fast and flawlessly.

My first app was iTronixPal. This app is a simple app for Electronics enthusiasts. Things like Resistor color code decoder is useful for people working in the electronics industry, or even for a hobbyist.

I tried to make it as nice as possible of course, because in iOS, aesthetics is very important. iOS users love pretty things. Back then I used Paint Shop Pro and I didn't know about vector graphics yet. But it works well because iPhones and iPod only have a single form factor.

Then I made a second app that change everything, it was iQuikSplash. iQuikSplash is a clone of the Color Splash app. Basically it just highlights a part of a photo and turns the rest to black and white. While the Color Splash app require you to manually draw using your finger the area that you want to leave in color, iQuiksplash did it by auto selection of a color.

So, by sheer luck, the Apple's App Reviewer (aka the App Store app curator) thought this was brilliant and my app was featured in the US App Store as New & Noteworthy. The downside was, the app was free and I was scared that if I change the app to Paid, i'd get removed from the New & Noteworthy section. That was a big facepalm by me, otherwise I could have earned a lot of money.

All the while the app was in New & Noteworthy, I left it as free, furthermore I even have the "FREE" word on the icon. Back then, Apple was so strict, one bad move by developer, your app could be rejected and removed from Sale, so that came into play why I left it as free.

While the free app was getting about 120,000 downloads a day and reaching No.2 spot in the Top Free Photography, I created another app - iQuiksplash Pro and later add the Link to Pro version in the Lite version and that translated to some good profits. I then created more camera apps like AppliFX. A photo app with many filters to apply to your photos.

The app gained quite a good downloads as well and it was a paid app. But, it crashes a lot because I was developing on SIMULATOR!! I made the mistake of taking the photos as is and processing the pixels in memory, and in large photos, the phone became out of memory and crashes the app. Then, I had no choice but to buy an iPod Touch. I get to fix most of the issues and the sales continue on.

I was getting good sales for these apps, as I created more apps, then Steve Jobs died. If you remember, this was the time iOS became ugly as f-ck! iOS5 and below, that was awesome, but iOS6 with its fugly flat design make me wanna puke! Then sometime in 2012, Apple acquired Chomp, a search engine company, to be implemented into App Store. That was when I noticed a considerable drop in my app discovery and sales. It focuses on App Title, Description and Ratings, and not just keywords. I tried to search my own app name "iQuikSplash" and it did not come up top anymore. So how are people who read about my app elsewhere could find my app?

That was the time where fake ratings and fake review started to show on my apps. You can click on a rating and see what other apps the user rate, and it is so obvious that a person rates 1 stars for all Photo apps, but only 1 app is getting 5 stars. Such scam turns the App Store into a savage, dog eat dog marketing world.

It was heartbreaking. As the years go by, more and more established and big corporations joined in the App Store in publishing even more professional apps, and not only that, they can also afford super expensive marketing campaign, that in turn, bury most of us indie developers, who only make enough for a living.

I tried to hang on from 2012 to 2015, sold some assets to keep afloat, and by end of 2015 I realized the Indie Dream is dead. So I started to find a day job as iOS developer in a company. It was ok but it was no longer fun making apps for other people. I quit that too and now I work in Industrial IT sector which I find is rewarding. Occasionally I get to code too, so that's a plus.

So that's all I have to share about my experience as an Indie iOS developer. I think Apple needed Steve Jobs, but as he dies, so does Apple. Since then I no longer see the confidence in their products. Stupid decisions are made, like charging port of Magic Mouse placed at the bottom, and latest, power button of Mac Mini placed at the bottom as well. I know Jobs will never allow that to happen.

Well, as Agent Smith said, Everything that has a beginning, has an end.

Finally, shout out to fellow indie devs who helped and just by being there over in the iPhoneDevSdk forum.

Adios.

How To: Automation Export PNG in Inkscape V1.0

noreply@blogger.com (GeneCode) — Thu, 20 Aug 2020 09:59:00 +0000

What's up?

Been a while eh? Everyone is doing well avoiding Covid19 I see. To the fallen ones, RIP. Nobody lives forever. Those that goes on, keep up keeping up.

Today I will be posting about how we can automate Inkscape export. I.. have...been.. doing... stupid... things.... for... 10 years. *SMACK HEAD*. Aw come on, everyone does stupid thing once in a while. Nobody is holy. What I mean, is for 10 years or more since I used Inkscape I have exported PNG for use in iOS apps this way:

It's a 18MB GIF File. :P

Enough to illustrate the amounts of keyboard presses and mouse clicks just to save @1x, @2x, @3x PNG of a particular image! Crazy!

Enter the Inkscape 1.0 Command line!

Inkscape has been Beta for a long while. And recently they (WHO IS 'THEY'?????), released a V1.0. With it, comes awesomeness and pizzas. Ok kidding about the pizza. But dark mode, and the fact that it no longer requires X11 to run tastes like pizza really. So good. Even in Beta, command lines exist, but there are not much tutorials about it. Especially on Mac.

So I had some time to tinker with it, and managed to make it work after 3-4 hours.

The command line works with the inkscape binary that resides INSIDE the Inkscape.app package that resides in /Application/ folder. As MacOS uses linux base, we can write a simple bash script to automate the export of a particular object groups.

There are requirements to implement this:

You need to know your way around the Terminal app, and linux basic command lines like cd, ls, etc.
You need to specify FULL PATHS to input SVG and output PNG, otherwise the binary is going to assume it exist in current directory.
You need a code text editor like Atom. But, you can also use TextEdit, but the syntax will not be highlighted in pretty colors. :P
In the SVG, you need to give "ID" to the objects that you grouped to be exported.

For this tutorial, I will setup a script that resides in your home user directory. For me it is

/Users/genecode

So in this folder, I shall create another folder for svg file.

/Users/genecode/svg

Then we will output the PNG in another folder.

/Users/genecode/output

Now lets create the SVG file. I made this car with tyres in inkscape. All are in same layer. For this to work, it does not matter which layer the object resides. What matters is what unique ID you gave them.

(My awesome artwork :P)

Lets assume you want to export the car body into carBody@1x,@2x,@3x and carTyre@1x,@2x,@3x. Notice that the body is just one object created with Pen tool. And that each of the tyre is 2 objects (black and grey circles).

Before saving the svg, click the body, right click and select "Object Properties" on the menu. Then on "ID", enter "bodyID" for example. Then click "Set" button. (ID can be anything you choose). Do the same with one tyre, group the tyre into one group, and right click and select "Object Properties". on ID, enter "tyreID".

Once that done, save your drawing.svg in the /User/genecode/svg/ folder , and open your code editor.

First, I decided that I want to be able to give the automation script a parameter input of the svg filename. Something like

sh export.sh drawing

This enables me to export from any svg that I want. Here is the script that I came up with, that complies to the folders that we created earlier:

for i in {1..3}
do

  WID=$((600*i))
  /Applications/Inkscape2.app/Contents/MacOS/inkscape --export-type="png" --export-id="bodyID" --export-id-only --export-filename="carBody@${i}x.png" --export-background-opacity=0 --export-width=$WID  $(pwd)/svg/$1.svg

done

The inkscape command line starts at /Applications/Inkscape2.app... The rest are bash.

What does the code do?

for i in {1..3}

WID=$((600*i))

First, this will loop the command line 3 times to produce @1x.png, @2x.png and @3x.png in one go. I also has a formula to automatically calculate the width of each PNG in each passes. First will be 600, second 1200, and third 1800 pixels.

/Applications/Inkscape2.app/Contents/MacOS/inkscape

Also to note, that my Inkscape is named Inkscape2 in Applications, hence my path points to that. That is because I still have the beta version inkscape as "Inkscape" in Applications. So you need to change yours to be Inkscape.app if you do not name it differently.

--export-type="png"

This will tell inkscape to output PNG files.

--export-id="bodyID"

This will tell inkscape to export only the objects with group ID "bodyID" as we set in Object Properties above.

--export-id-only

This will tell inkscape to object with export ID only.

--export-filename="$(pwd)/output/carBody@${i}x.png"

This will tell what filename the exported PNG will have. Here I put in variable names based on the loop variable. This will match to iOS app standard. pwd is a standard unix command to get (p)arent (w)orking (d)irectory. Since the script resides in /Users/genecode, this line will translate to /Users/genecode/output/carBody**.png

--export-background-opacity=0

This will tell inkscape to export with transparent background.

--export-width=$WID

This will specify the width of PNG to export.

$(pwd)/svg/$1.svg

And finally this is the input SVG file that are input by parameter as we've decided. pwd is a standard unix command to get (p)arent (w)orking (d)irectory. Since the script resides in /Users/genecode, this line will translate to /Users/genecode/svg/drawing.svg

GREAT! EASY RIGHT?

Now lets see the script in action:

As you can see, 3 images of the carbody are exported to the output folder on the go. You can then add more lines in that for loop to add more objects to be exported automatically.

Here are the results:

This will surely save your time! Ok thanks for reading. Cheerio.

How To: Apply Steve Jobs Design Principle in Your Apps

noreply@blogger.com (GeneCode) — Sat, 28 Mar 2020 08:45:00 +0000

Introduction

Today, I want to write about a crucial topic in app development - software design. It is based on my own experience developing and designing softwares since 1990s. But let me indicate here that I do not have ANY computer subjects qualifications. I do not know a lot of computing terms, jargons, methodologies and I am not even well versed in deployment process, staging, unit tests, CID, blah blah yadda yadda. I was an Electrical & Electronics Engineering Major. But I have always find software development interesting and fun. To create something that people use and benefit from. But I think it is mostly due to the no-bullshit work environment. You cannot lie to your computer. And your computer cannot lie to you. If you input a = 1; There is no way in hell, your computer would say a = 2; Unless you told the computer to add a 1 to it. The honesty with coding, is satisfying.

There are grey areas though. Especially happens when you do not understand the code you are writing. For example, a global variable that is non exclusive, and has multiple threads accessing it, and you are using that variable to do something else, an unexpected result may occur. But the unexpected result occurred by truth. And not by lies. So, if you traverse the thread, slowly, you will be able to see the problem and pin point the cause.

Steve Jobs's Design Principle

Some people calls Apple fans as sheeple 🐑- dumb sheep that just support Apple whatever they do. I guess, that would be true for any groups of people. There are those who see and acknowledge the truth in a system. And there are those, who follow blindly. As for me, I'd like to believe that I saw the genius in Apple (back when Jobs was still alive anyways). What makes Apple great, was how intricate the consideration in designing every single little things, and how all of them have connections to user ability by human beings. Hence why the Apple's User guidelines were dubbed the "Human Interface Guidelines". There are plenty of extremely important guidelines in there. A traditional software may have a User Manual. But Apple's softwares shall have a Human Manuals. A reminder that the users are actual human beings with feelings, limbs and eyes.

An example of Jobs' genius, is in the simplicity of the OS, namely iOS. Back then, the iOS is so simple, that using the limited iOS fits well in the small device that we carry on our hands. Thus we are more focused in doing work rather than wasting time to figure out how to enable a feature.
There are so many other genius ideas, like gestures, magnetic power port, positioning of power button and volume buttons accessible easily by the thumb, and so on.

Traditional developers often work from codes, to peripherals, to hands and fingers that use them. They prioritize code simplicity and focused on functionality 100%. Apple developers, are taught to work from their bodies, to their hands, fingers, eyes, to peripherals and finally the code and functionality. It is at 180 degrees from what traditional developers do. And that is why it was able to capture so many people by heart.

To visualize and therefore prove the definition of this "reversed approach", lets take a simple data collection represented by a UITableView. I will take my latest app under development as an example, Cars.tomizer:

Looks good? Job well done? Take a look again. What is the problem? Let me list down the issue with this design. It appears that there are only 3 cars here. The scrollbar for UITableView is hidden. So it is not immediately obvious that you can scroll for more. How do we apply the Jobs' Design Principle here? Many ways:

1. Add shadow to the bottom bar, so it appears that the list is behind the bar, and human will guess there are more.

Better right?

2. Alternatively, adjust the cell height, so that the default view cuts off half of the third car, implying, there are more down there. Or combine both:

Now it is even more obvious that this data is scrollable, and there are more down there.

3. Go a little bit further - add a tiny scrolling animation upon opening the view.

4. You can think of any other ways to achieve this. These are just examples of the extra considerations in order to apply Jobs' Design principle.

Most traditional developers will stop at the first step. Their mindset is stuck at the functionality, and as far as functionality is concerned, their job is done. And that is where they are wrong. This case is just one example of the Design Principle taught by Steve Jobs. Go the extra mile to make every little things, work and present themselves in the best way.

And when you start applying these principles, you will find your users, easily figure out things in your apps, and that makes them happy. Their workflow improved greatly, and hopefully that 4 or 5 Stars are coming in.

Testing Your Apps

Once your app is done, as developer or programmer, you often cannot be bothered to really test your app. You are tired and exhausted from coding. So having a beta test team is critical. Their job is to scrutinize your work. Condemn it to hell. And complain for every tiny thing that bothers them. And developer MUST fix all of them.

As for me, a solo indie hobbyist developer, I often simply give it to my kids to test. If even a kid can't figure out how things work, it is a clear indicator that your app design is problematic. And what's more important is for you to SEE the app in action used by another person. See how they interact with it. Which button do they press first, and so on.

Stress test is also important. If you app involves saving data into the phone, add up as much data as possible and try saving and loading repeatedly. Make sure the app does not crash. These are typical test procedures, on the surface. If you wish you could go deeper by testing your app using Intruments or Profiling tool in XCode. I have not really used them though. I rely on good old user test methods.

Summary

As a summary, what I can say about Jobs' Design Principle is - your job as developer does not stop at functionality. Go the extra mile, with human interaction considerations. Add that 5 or 10 more methods, 500 lines of codes or more, to polish the app, so it is easy to use, easy to recognize, that essentially, your ultimate aim is to the point that the user won't even need to "Read Instructions". And particularly, HOW a particular feature works. Does it also involve way too many steps to achieve a simple job? Eliminate steps, eliminate button presses. Use gestures, but don't overuse them. It will be hard to make things simple, as Jobs' said:

Go the extra mile and happy coding!

Tutorial: Making a Platform Game Like Mario With SpriteKit (Part 1 - The Basics)

noreply@blogger.com (GeneCode) — Tue, 31 Dec 2019 11:22:00 +0000

Another year is gone. I remember when I was a little boy, I'd be hyped when people talk about the "FUTURE". That time, circa 1980s, the "FUTURE" means anywhere in the year 2000+. The year 2020 is somewhat special though due to its nice number arrangement. 2020 itself sounds futuristic. But lo and behold, we are almost there now! 40 years have passed just like that. I have to admit when you reach 40, time seems to go by much more faster. It seems you have so much to do, but there isn't just enough time to do it. Get busy living, get busy dying.

20MHz Processor LMAO. 8 Grand

In terms of tech, no doubt we have progressed so much. Imagine back then in 1980 a computer with very low specs are so expensive. In terms of computing power, and computing tools like Machine Learning, AI, OCR, and so on we have made quite the leap. Imagine what engineers and scientists could achieve in another 40 years? Most probably I'd be dead by then :P

Done with the intro. So, the first ever game I created from scratch with SpriteKit was the Flappy Bird clone called "Idiot Bird". It was quite a challenge, because I was new to SpriteKit, and Idiot Bird uses physics in order for the bird to fly. And who could forget the way the bird smash its face flat to the ground? Haha...

Believe it or not, my first game I developed in iOS was using 100% UIKit using UIImageView as sprites. Here take a look:

I used Paint Shop Pro to create all the (nasty nasty raster) graphics and place them using UIImageViews. It worked quite OK, because it was a turned based game. And animation is smooth just by using a normal UIView animation. This is a monumental evidence that UIKit is such a great framework. Windows framework fails miserably if you try to animate their buttons. There is no fluidity.

Anyway, lets get to topic: SpriteKit's Physics. You can create a Spritekit game without any physics setup. But the kind of games you can make is therefore limited. Games that won't use physics are like Chess game, or card game, or even simple shooting game (top view typically). But if you wish to make a game that feels real, Physics is a must.

For this purpose, we will create a simple scene. A character bouncing on a platform. The first thing to do is to add 2 sprites to a scene. With my amazing graphics skills (lol), here is what I created:

You may download the image and resize it for other scales. Add both sprites to the scene in didMoveToView and position the character slightly above the platform.


- (void)didMoveToView:(SKView *)view {
    
    //create bunny
    SKSpriteNode *bunny = [SKSpriteNode spriteNodeWithImageNamed:@"bunny"];
    bunny.name = @"bunny";
    bunny.position = CGPointMake(self.size.width/2.0, self.size.height/2.0+100);
    [self addChild:bunny];

    //create platform
    SKSpriteNode *platform = [SKSpriteNode spriteNodeWithImageNamed:@"p_grass"];
    platform.name = @"p_grass";
    platform.position = CGPointMake(self.size.width/2.0, self.size.height/2.0);
    [self addChild:platform];
}

Run it, and you will see both of them in the scene.

But... nothing happens. Boring right? So how do we tell the scene that we want to apply gravity to the sprites in the scene so that the bunny would fall? Easy. Enter the codes below:


    // scene physics initialization
    self.physicsWorld.gravity = CGVectorMake(0, -5.0f);
    
    //create bunny
    SKSpriteNode *bunny = [SKSpriteNode spriteNodeWithImageNamed:@"bunny"];
    bunny.name = @"bunny";
    bunny.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:bunny.size]; 
    bunny.position = CGPointMake(self.size.width/2.0, self.size.height/2.0+100);
    [self addChild:bunny];

    SKSpriteNode *platform = [SKSpriteNode spriteNodeWithImageNamed:@"p_grass"];
    platform.name = @"p_grass";
    platform.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:platform.size];
    platform.position = CGPointMake(self.size.width/2.0, self.size.height/2.0);
    [self addChild:platform];

What we did was to add one liner scene PhysicsWorld initialization specifying the gravity to a vector. What is vector? If you paid attention in your algebra class you'd know it :P. In simple terms, vector is simply a collection of values that defines direction and magnitude. In our case, SpriteKit is a 2 dimensional space. So it has x and y vector components in a normal Cartesian axes. So to specify a downward gravity, use (0, negative value). Here we use (0,-5) for a fairly moderate pull force to the bottom. If you want the scene environment to pull everything to the top, then you use (0,9), if you want to pull everything to the left, then you use (-8, 0), and if you want to pull everything to bottom left, you can use (-8, -7).

After specifying the scene physics, we also need to specify which of our sprites will be affected by it. So we have to add the physicsBody definition to our spritenode. There are multiple types of physicsBody, and here we use Rectangle type. There are types of:

RectangleWithSize (specify CGSize)
CircleWithRadius (specify float radius)
PolygonFromPath (specify path of custom shape)

Most people simply use rectangle or circle for physicsbody, unless you are doing something complicated, polygon physicsbody should not be used. Anyway lets run our game, what's going on?

LOL! Both of them fall down... but duh.. that is exactly what the code says. And that means the physics is now in action. Ok lets take a break to award ourselves with this accomplishment. XD

Obviously we do not want the platform to fall, but yet we still need it to be affected by physics in order to interact with the bunny. If we remove the physicsbody from the platform spritenode, the bunny will ignore the platform like it's not even there. Try it yourself. Here is what you should get:

So to tell the platform not to be affected by gravity, but yet be able to interact with the bunny, we specify a boolean to a property affectedByGravity


platform.physicsBody.affectedByGravity = NO;

Add the line under the physicsBody definition of the platform spritenode and you should end up with the following:

Woah? We still FAIL. But there are progress. As we can see, the bunny now interacts with the platform. The platform no longer falls down by itself but it is being forced down by the weight of the bunny. How do we solve this? Enter the dynamic property of physicsBody.

platform.physicsBody.dynamic = NO;

This tells the physics engine that the platform will ignore any force applied to it. And you will end up with:

As you can see, now the bunny bounces a bit as he lands. This is physics at work. We did not write ANY codes for this bounces. Movements looks more natural and nice and human can relate to it and this is an important factor to capture human's interest in your game.

The final code is:


    self.physicsWorld.gravity = CGVectorMake(0, -3.0f);
    
    //create bunny
    SKSpriteNode *bunny = [SKSpriteNode spriteNodeWithImageNamed:@"bunny"];
    bunny.name = @"bunny";
    bunny.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:bunny.size];
    bunny.position = CGPointMake(self.size.width/2.0, self.size.height/2.0+200);
    [self addChild:bunny];

    SKSpriteNode *platform = [SKSpriteNode spriteNodeWithImageNamed:@"p_grass"];
    platform.name = @"p_grass";
    platform.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:platform.size];
    platform.physicsBody.affectedByGravity = NO;
    platform.physicsBody.dynamic = NO;
    platform.position = CGPointMake(self.size.width/2.0, self.size.height/2.0);
    [self addChild:platform];

As you can see, I reduced the gravity a bit because I wanted to be able to capture the animation and show you what's going on. I also moved the bunny further up by 200 points. As you can see, now the bunny bounces a bit as he lands. This is physics at work. We did not write ANY codes for this bounces. Movements looks more natural and nice and human can relate to it and this is an important factor to capture human's interest in your game.

Now we got the bunny to land and bounce on the platform, we are that much closer to a platform game like Mario. The next thing to do is add more platforms and code the controls for the bunny. How do we make him jump? Enter the code below:


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    SKSpriteNode *bunny = (SKSpriteNode*)[self childNodeWithName:@"bunny"];
    [bunny.physicsBody applyImpulse:CGVectorMake(0, 50)];
}

touchesBegan is a typical delegate function to detect finger touches on screen. We use this to tell our bunny to jump. In order to jump, an upward momentary force (impulse) is applied once every time we touch the screen. And the results:

Success! Now we have a bunny jumping on a platform. There is another way to make the bunny jump, such as setting velocity of bunny to positive value on the Y axis. And you can fine tune the gravity, the jump speed, bounciness, all by tweaking the gravity, the impulse value, and also a few more bunny's physicBody's properties:

restitution
mass
friction
density

Experiment with the values and see what you could come up with. That's all for Part 1 of this tutorial. I will delve in more in the next part so that at least we got a playable simple game collecting coins or carrots :P

Cheers and have a nice day!

How To: Use Cocoapods for Your XCode Projects

noreply@blogger.com (GeneCode) — Sat, 31 Aug 2019 03:48:00 +0000

Hi guys. Been a while eh? As for me, been busy with updating my apps. I just updated one of my kids game Eggs Surprise With Friends. Improved on the graphics and gameplay based on user feedback back in 2016 HAHAH! First, an intro.

Human beings rely on blind beliefs to have a large-scale cooperation. We all believe in something that is not there physically. We believe in God (some of us not all of course). God is nowhere to be seen, cannot be measured, cannot be heard, cannot be touched. We believe in our country. Yet, a country is merely a make belief concept, and exists only in maps. We believe in the company we work in. But the company does not exist other than on papers. Our collective belief that the company exists, make us feel we belong to it, and therefore we can together work towards a common goal - be it increasing the company's profits for employees' benefits, or prospering a nation, or mass producing products. Belief in the unseen is important and needed for humanity, unless when it starts to oppress others.

How's that for an intro? :D

Back to topic: COCOAPODS.

Wow I never saw an actual cocoa pod before.. now I know how it looks like! What a great thing google is. What is CocoaPods? Why is it called Cocoa? Cocoa is basically Programming API for Mac OSX. Basically it is a set of functions, classes, frameworks that enables you to create a Mac Applications/Softwares. And iOS imports some of those as well. Back then, I was so occupied in creating my own controls, customizing UI is one of the fun thing to do! I still love to customize UIs. Here are some of the controls that I made in the past - ranging from noobiest, to a fairly intermediate level where I am now.

Slide To Unlock, replicating the iconic iOS's Slide to Unlock button. https://xcodenoobies.blogspot.com/2011/03/how-to-do-slide-to-unlock.html
UISwitchy, a flexible customizable Switch. https://xcodenoobies.blogspot.com/2013/04/free-custom-uiswitch-flexible-colors.html
GCToolBar, a flexible classy looking Toolbar. https://github.com/gene-code/GCToolBar
GCSpriteAlert, an Alert Box that looks like the UIKit one, but on SpriteKit. https://github.com/gene-code/GCSpriteAlert

CocoaPods are basically small components that are made by other developers worldwide, using Cocoa. When I learnt about cocoapods, I couldn't really understand what it is. A simple way to explain is CocoaPods is like more options to your UIViews, UISwitch, and UITableViews. You can contribute to it by making your own controls and user interface objects. Or you can simply use them.

For example, lets say you are making a drawing app. You need to code the drawing part, how the touches translates to lines and curves. And then you also need a way to pick a pen color. Here is where you have that option - do you create your own color picker?? Or, simply import a color picker object made by others from CocoaPods library? There are plenty of CocoaPods color pickers. You can browse them here: https://cocoapods.org

But how do we add any of these cocoapods to our XCode project? Here is where I got lost and gave up on CocoaPods lol. No don't give up. I will teach you how.

First step is to INSTALL COCOAPODS into your Mac. This is easy really. You are going to use some terminal commands but don't worry it is really straight forward. I actually outlined it in the StackOverflow answer here, but I am going to outline it again here in this blogpost in case somebody edited that answer.

[ 1 ] Open terminal and type:

sudo gem install cocoapods

Gem will get installed in Ruby inside System library. Or try on 10.11 Mac OSX El Capitan, type:

sudo gem install -n /usr/local/bin cocoapods

If there is an error "activesupport requires Ruby version >= 2.xx", then install latest activesupport first by typing in terminal.

sudo gem install activesupport -v 4.2.6

[ 2 ] After installation, there will be a lot of messages, read them and if no error found, it means cocoapods installation is done. Next, you need to setup the cocoapods master repo. Type in terminal:

pod setup

And wait it will download the master repo. The size is very big (370.0MB at Dec 2016). So it can be a while. You can track of the download by opening Activity and goto Network tab and search for git-remote-https. Alternatively you can try adding verbose to the command like so:

pod setup --verbose

[ 3 ] Once done it will output "Setup Complete", and you can create your XCode project and save it.

[ 4 ] Then in terminal cd to "your XCode project root directory" (where your .xcodeproj file resides) and type:

pod init

[ 5 ] Then open your project's podfile by typing in terminal (or open using Atom/TextEdit/Notepad++ etc):

open -a Xcode Podfile

[ 6 ] Your Podfile will get open in text mode. Initially there will be some default commands in there. Here is where you add your project's dependencies. For example, in the podfile, type

pod 'AFNetworking', '0.9.1'

(this line is an example of adding the AFNetworking library to your project).

Other tips:

Uncomment platform :ios, '9.0' Uncomment user_frameworks! if you're using Swift

When you are done editing the podfile, save it and close Xcode.

[ 7 ] Then install pods into your project by typing in terminal:

pod install

Depending how many libraries you added to your podfile for your project, the time to complete this varies. Once completed, there will be a message that says

"Pod installation complete! There are X dependencies from the Podfile and X total pods installed."

Now close your Xcode project. Then locate and open the .xcworkspace Xcode project file and start coding. (You should no longer open the xcodeproj file)

Step [6] is where you import any of the CocoaPods that you like to use. The command line to import is generally "pod [podname], [version]". Lets choose a cocoapod and install it. I found a iOS-color-wheel pod, so I click on it and its own page opens up. Then on the left there is a Installation Guide button, click on that and there will be a popup with the command line in the middle (see arrow).

Copy this and paste in your "Podfile" file on your text editor.

WARNING! Do take note what language that the pod was written on. Some are Swifts some are ObjCs. So far I used ObjC only so I am not sure what happens if you use Swift's pod in an ObjC project. My guess is it won't work as expected.

After you added the command in your Podfile, save it and return to the command line where your Podfile resides and do step [7] above.

If later in your development, you want to add more pods to your project, then you simple open your Podfile again, copy paste the pod command lines and run the "pod install" in your terminal. And then you can use those pods normally by importing their headers, like any other normal libraries/frameworks.

Here is a sample of one of my apps' Podfile that uses multiple pods:

Here you can see I even have 2 targets (Pro and Lite app) and I only use Admob ads pod in one of the target (Lite version has ads). So everytime you update an app, you can also update your pods' version (if any, depending on their developers). Just run "pod update".

One last thing, is to remember to open your XCode project, by opening the newly created .xcworkspace file instead of the xcodeproj file. That will load the correct files for CocoaPods to work properly with your project.

Cocoapod has grown big. A lot of developers contributed to this library. As people say, why reinvent the wheel? Well, in some case, we do need to reinvent the wheel, if there aren't any good library out there to do a particular thing, or if you think of something better, do create it and add to the pod. I am planning to add my controls to the pod as well, but maybe later after I am able to code in Swift proficiently.

That's all for now.... cya later

How To: Update Your old SpriteKit Game to be Compatible with iPhone X, XS, XR, XS Max

noreply@blogger.com (GeneCode) — Wed, 27 Feb 2019 11:26:00 +0000

Yoooo wazaaaaapppppp...

Ok, first, a witty intro (again?).

We often hear people say do not disturb a developer or programmer. But often we do not understand why. It is not the same as disturbing someone who is doing a regular office job. When a programmer is coding, he is actually building a Millenium Falcon lego model in his head. All the parts are assembled in his head in groups. Once you disturb a programmer, all the groups that are built in his head (but not yet assembled), will crumble and he will have to start over from zero.

Take my advice: If you see programmer coding, DO NOT SAY ANYTHING TO HIM. DO NOT EVEN COME NEAR.

Anyway, lets go on with the tutorial:

I actually have 2 blog posts that are WIP. Haven't got the time to finish them yet. But, as I update my SpriteKit game, I notice something weird that is happening to the Scenes in iPhone Notch. iPhone Notch is what I call all the iPhones that have notch in them like - iPhone X, XS, XR, XS Max. Check out one of my game screen when run on iPhone Notch:

Basically, the whole scene get stretched and the bottom bar and title overlapped with notch and bottom line (i think it is the control center slide up menu). I saw many people on the Stackoverflow were asking similar questions, and most resort to REPOSITIONING all the sprites. This is crazy! No way in hell I am going to do so much work! There are not just one scene!

As a lazy ass bum developer, I went ahead and try a few things in ViewController instead without touching any of the Scenes. Lo and behold, I found solution:



-(void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];
    
    if (!layoutDone) {
        layoutDone = YES;
        
        // Configure the view.
        SKView * skView = (SKView *)self.view;
        skView.multipleTouchEnabled = NO;

        // Create and configure the scene.
        SKScene * scene = [GameScene sceneWithSize:skView.bounds.size];    // LINE 1
        scene.scaleMode = SKSceneScaleModeAspectFill;                      // LINE 2
        
        // Present the scene.
        [skView presentScene:scene];

        
    }
}

The above is the original SpriteKit code. I added layoutDone boolean check so that the scene gets drawn once. I think this code used to be in viewDidLoad in earlier versions of XCode spritekit template. But since autolayout, it has been put into viewWillLayoutSubviews.

Anyways, the solution, replace LINE 1 and LINE 2 with the lines below:


SKScene * scene = [GameScene sceneWithSize:skView.safeAreaLayoutGuide.layoutFrame.size]; // LINE 1
scene.scaleMode = SKSceneScaleModeAspectFit;                                             // LINE 2

Basically, we init the scene with the safeArea layout size, and set the scalemode to aspectFit. Just these two lines and voila:

I have also tested the code against iPhone 8 (a Non-Notch iPhone), and it appears normal. So this is pretty much a perfect easy solution. But of course, to use the safeArea, you need at least iOS11, which I think is a good minimum iOS requirement as of now. iOS version adoption rate is quite high.

But ah... just noticed the admob banner is covering the menu bar at the bottom :D that is another issue that I need to fix. You see why it is good to write a blog now, you get to debug your code at the same time too. Hahaha!

This tutorial has no downloadable Project because.... it's just some code sharing really.

Ok guys. That's all. Thanks for reading.

How To: Make an App That Uses Public API (Openweathermap.org) Using NSURLSession

noreply@blogger.com (GeneCode) — Sat, 18 Nov 2017 09:03:00 +0000

I think I mentioned somewhere (and maybe everywhere) that I love JSON. I LOVE IT! JSON is basically like NSDictionary. Every entry has a key and a value. And you can go nesting too - like a dictionary of dictionary of dictionary. O_o

// this is a bird's nest

What we're going to make:

2.5MB GIF

JSON is structured and that is why many web service opts to this format for communication between a client and server. In the old days, or even now, some web service still use obscure format like user-defined text strings separated by pipes or commas (CSV). Something like:

1,Q,London,23.7,22.6,22.3
2,Q,Tokyo,13.7,12.6,12.3
3,Q,Kuala Lumpur,28.7,32.6,32.3

You get the response and process it by splitting it by LFCR (Linefeed(newline) or Carriage Return - \n or \r) and further processing each lines by splitting it with commas. It can get complex. And can easily break if any column data suddenly has a comma in it. Or some server system only print out \n only or \r only. All sorts of unforeseeable problems in that department! In short, fuck that shit. haha.

And that is why most Public APIs uses JSON (or XML which is what PLIST are) to send data to a request from a client. In this tutorial, we will make a weather app by connecting to a FREE (free stuffs are groovy) weather API service called openweathermap.org.

First, as you would've guessed, you need to register an account at openweathermap.org. Go ahead and do that it's free. Once you've registered, log in and go to the API tab to get your API KEY. Most API calls require API key. It serves as the identification of the API caller (ie your app). There are some public APIs that don't require key (Twitter previously don't require API key either but now they do :\, and NASA too offers API without API key - those people at NASA are so nice. :D). I actually has one app that uses their MODIS Satellite data using their cool API, called HazeToday. It plots the hot spots (mostly fire) on the map and I also use another API from China to plot pollution index on the map.

Anyway, API Key normally looks like this:

f2c2dfdcf3d0e1e40f5ddff65f580a62

A long string of hexadecimal number. Obviously this is not my key. And it is also not your key. It is just an example of how the key look like. You need to copy your own key in the API tabs page of openweathermap.org and append it to your API url later on.

So let us create our Project in XCode. Choose a single viewcontroller template. Give it a name and when the project has been created, open the Storyboard and put two labels on it and change the appearance to be something like the image below. First label text is "0.0°C" and second label with a smaller font size with text "--" (two dashes). Remember to add the constraints.

After that, connect the 2 labels to their IBOutlets. Next lets add a picker with a list of famous cities in the world. Lets make it such that we can select a city and have the current temperature of that city shown on it. For this purpose, drop a UIPickerView on it and add constraints and connect the IBOutlet, datasource and delegate. Connect IBOutlet to the picker and add the UIPickerViewDelegate and UIPickerViewDataSource to the interface. You'll end up with something like this:

Our State-of-the-art UI :P

Now, we need to declare an NSArray to hold the city list. For this tutorial purposes, the array is going to be static, if you need it to be expandable, or read from a file/server, you may change it to NSMutableArray and add cities to it programatically.

Your ViewController.h should now look like this:



@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource>
@property (weak, nonatomic) IBOutlet UILabel *tempLabel;
@property (weak, nonatomic) IBOutlet UILabel *cityLabel;
@property (weak, nonatomic) IBOutlet UIPickerView *cityPicker;
@property (nonatomic, strong) NSArray *cityArray;

@end

Lets create the cityArray in viewDidLoad with some cities.

Note: If you create your data in viewDidLoad, you do not need to reload components of the pickerview as the pickerview sets its dataSource AFTER viewDidLoad.


self.cityArray = [NSArray arrayWithObjects:@"London",@"Tokyo",@"Jakarta",
@"California", @"Taiwan", @"Seoul",@"Delhi",@"Istanbul", @"Beijing", nil];

Next lets add the PickerView delegate methods and link our dataSource cityArray to it:


-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    
}

-(NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    return [_cityArray objectAtIndex:row];
}

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return [_cityArray count];
}

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 1;
}

If you run the app now, you will get a list of the city populated in the PickerView nicely. Check it out in the *ahem*, iPhone X simulator (lol that notch so fugly).

You can also scroll it and select a particular city. But nothing happens yet because our "didSelectRow" delegate is empty. What we need to do now is call the API when user selected a city. So lets create a custom method and construct an NSURLSession dataTask to request an API call to OpenWeatherMap.

There are many NSURLSession functions, namely downloadDataTask, dataTask, uploadDataTask, etc. NSURLSession is relatively new Apple API, before this developers use NSURLConnection. The advantage of NSURLSession is that it is an NSOperationQueue itself. So we can set its behaviour, or by default it will run serially. NSURLSession manages itself better and you should use it from now on.


-(void)getWeatherForCity:(NSString*)city {
    

    NSString *APIurl = [NSString stringWithFormat:@"http://api.openweathermap.org/data/2.5/weather?APPID=%@&q=%@",API_KEY,city];
    
    NSURLSession *session = [NSURLSession sharedSession];
    NSURLSessionDataTask *dataTask = [session dataTaskWithURL:[NSURL URLWithString:APIurl]
                                            completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                
                                                
                                                
                                            }];
    [dataTask resume];
    
}

Note that writing NSURLSessionDataTask *dataTask = ... merely sets the session up and what to do when it is completed but it is not being triggered until you call [dataTask resume]; One could easily miss this and be wondering why the code isn't working.
Lets break this down piece by piece:

First of all, we need to construct the URL for the API call. Most public APIs follow the same format for GET method - [MAIN URL]/[API]?key=[YOUR_API_KEY]&param1=a&param2=b But it really depends on the API provider they can use any format they want. For POST method, the construct is a little different because the parameters are not inside the URL, instead it is embedded inside the request Command.

In our case,
[API] = weather
key = API_KEY
param1 = q
param2 = not available.

So with a simple NSString formatting, we can assign these to our string URL. A quick NSLog of APIurl should yield:

http://api.openweathermap.org/data/2.5/weather?APPID=YOUR_API_KEY&q=London

Copying and pasting this to the browser, you should see some json results printed on your browser. But remember to replace YOUR_API_KEY with your hexadecimal key string otherwise it won't work.

The above image shows how to test your API call with browser if it uses "GET" method. Note you cannot test "POST" method using browser, you may take a look at the app Postman to do that. Now lets write didSelectRow method. We need to retrieve the string in the pickerview and attach it to our getWeatherForCity: parameter.


-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    
    NSString * selectedCity = [_cityArray objectAtIndex:row];
    [self getWeatherForCity:selectedCity];
}

Now the session call code is done, lets see it work. Don't worry about the completion block code yet. What we need to do now is check whether our NSURLSession works or not. We can do this by adding NSLog to the completion block to see the response from the server to our simulator. Add it and now our code should look like this:

 NSURLSessionDataTask *dataTask = [session dataTaskWithURL:[NSURL URLWithString:APIurl]
                                            completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                
                                                NSLog(@"RESPONSE: %@",response.description);
                                                
                                            }];

Lets run our app in simulator and check the console log.

IMPORTANT: If your public API uses http instead of https, your call will be blocked by the iOS. You need to add a little settings in the Info.plist. (App Transport Security key). You can read here for more information: https://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http

If your API call is not blocked and if your internet is working fine, when you select a City from the pickerview, you will see a response from the server:

A response from server normally indicates the status of your call. A server may decline your call, due to several reasons, such as wrong parameters set, or other server related errors. The response from Openweathermap is one of the best response I have ever seen. It reports, status code (400 = successful), and lots of info in the header - supported call methods (GET/POST), and etc). Normally we don't use these, except for status code, so we can handle the response in our app - for example, if the response is successful, then we read the data and display, but if the response code is other than code 400, we may display an alert to user "Server error, please try again later"... or something like that.

Another way to do this is to simply check for the error returned. If it is nil, then it could be successful, or it could be timed out. That is entirely up to the developer which to choose. For our tutorial, lets assume the server always replies with code 400 (ie successful) and the error is always nil. So we can immediately process the data received.

The data sent by the server is string encoded as NSData, so we need a way to convert this data (which is binary format) into a string. We do this by using an available iOS API call of NSString class method initWithData: encoding: Lets add NSLog again, but this time to display our converted data. Your getWeatherForCity now looks like this:


-(void)getWeatherForCity:(NSString*)city {
    
    
    NSString *APIurl = [NSString stringWithFormat:@"https://api.openweathermap.org/data/2.5/weather?APPID=%@&q=%@",K_API_KEY,city];
    
    NSURLSession *session = [NSURLSession sharedSession];
    NSURLSessionDataTask *dataTask = [session dataTaskWithURL:[NSURL URLWithString:APIurl]
                completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                
                 NSString* dataStr = [[NSString alloc] initWithData:data encoding:NSASCIIStringEncoding];
                NSLog(@"Result: %@", dataStr);
                                                
                                                
                }];
    [dataTask resume];
    
}

Assuming no errors for both cases, when we run the app, and selecting a city, we will get the result:

GREAT! Now we have this json in string format we can process it and pick which data we want to display. As you can see, there are quite many data available here, but we're going to display one only and that is "temp" data tucked inside the json structure. When you see this structure, you might freak out. But don't. Instead copy it and paste in http://jsonviewer.stack.hu/. Then click on the Viewer tab, you will be able to view the data structure better:

Nice right??? JSON format is basically NSDictionary. It has a "key" and "value" pair. For our case, we need to get the "main" key, where the content is another dictionary, and we can retrieve the value of temperature, at the "temp" key. But what we have now is only string format, how do we convert this string of json structure into NSDictionary? Enter the code below:



NSData * jsonData = [dataStr dataUsingEncoding:NSASCIIStringEncoding];
NSError * error=nil;
NSDictionary * parsedDict = [NSJSONSerialization JSONObjectWithData:jsonData options:kNilOptions error:&error];

Now we can use parsedDict, traverse into the temp key and get the value and display.


NSDictionary *mainDict = [parsedData objectForKey:@"main"];
_tempLabel.text = [mainDict objectForKey:@"temp"];

If you run it, you probably will have a crash. LOL! What's wrong? Firstly, take a good look at the JSON format in the online viewer. temp holds a number. That means, the returned object of key "temp" is an NSNumber and not an NSString. An example of NSString object in the json is in the "name" key which is "Tokyo". Whatever that is inside a double quote, that is safe to assume that it is a NSString. Otherwise it is an NSNumber especially the data is a number like 23.5, or 35. And by logical thinking, for example a data of 456F is an NSString even if it does not have a doublequotes. Thus we need to change our code:


NSDictionary *mainDict = [parsedData objectForKey:@"main"];
NSNumber *tempNum = [mainDict objectForKey:@"temp"];
dispatch_async(dispatch_get_main_queue(), ^{
      _tempLabel.text = [NSString stringWithFormat:@"%.1f°C", [tempNum floatValue]];
});

Whoa. What's going on in this code? It is quite simple, except the dispatch part. First we assign the object from "temp" key to an NSNumber variable. Then we format it as a NSString and assign it to our label. That is pretty much it. %.1f format indicates we want a floating number with 1 decimal place. And suffix it with °C. Note, we also convert the NSNumber to a float first before supplying it to our string formatter.

So what is the dispatch thingy? It is a useful function to grab the main thread. As a general rule in software design, any update to the UI, must be done on the main thread. But our NSURLSession is a thread that runs in the background, thus if we want to udpate the UI in its block, we need to call the main thread and that's what dispatch thingy does.

Go ahead and run the app you will get the value displayed in the label when you select a city:

But wait, why is the temperature so high? 277 deg Celcius in London?? People will burn! Oh wait. Checks on openweathermap.org shows that temperature is in Kelvin. So we need to convert the number from Kelvin to Celcius using the formula:

T_(°C) = T_(K) - 273.15

Translating that to code:


float tempFloatK = [tempNum floatValue];
float tempFloatC = tempFloatK - 273.15;

What about the City label? You have 2 options here. One is to set it directly from the pickerview, or you can get it from "name" key in the json data. Lets just get it from json data. Add the following code to the getWeatherForCity method (bolded code is newly added):


NSDictionary *mainDict = [parsedData objectForKey:@"main"];
NSNumber *tempNum = [mainDict objectForKey:@"temp"];
                    
float tempFloatK = [tempNum floatValue];
float tempFloatC = tempFloatK - 273.15;
NSString *cityStr = [parsedData objectForKey:@"name"];
                    
dispatch_async(dispatch_get_main_queue(), ^{
       _tempLabel.text = [NSString stringWithFormat:@"%.1f°C", tempFloatC];
       _cityLabel.text = cityStr;
});

Now when you run the app, selecting a city, will show the temperature and city name underneath it. We're done! Below is the GIF of the app in action.

Further considerations: If you want to make this into an app, there are more things to consider:
1. A "loading" indicator right after a user selects a city.
2. Error messages if there is no internet
3. Error messages if the server is not returning any data or any other server related error
4. You can add more data to display since the server returns quite a handful of data.
5. Other cool features: Adding animations, nice pictures, even links to video of the city.

With that, we conclude our tutorial! Thanks fam.

More Contribution to XCode Community!

noreply@blogger.com (GeneCode) — Tue, 07 Nov 2017 11:36:00 +0000

One of my friends asked me, you get a lot of revenue from writing tutorial blog? My answer is - NO. I get like 0.001 cents per day from my blog currently lol. My blog isn't famous like appcoda or raywenderlich. So why do I keep on doing it? Simple - I always view that anything I learn, is an inspiration that is meant to be shared to everyone. I do it because I love to share what I know. Often, I faced with a problem to do something in my own apps, and upon finding a solution I like to document it, because I am sure others might have the same problem or obstacle. By sharing what I found or created, we advance together.

Enough intro. Anyway this post is a short one. I just want to announce yet another contribution that I am making towards the XCode Community - MY FIRST EVER GITHUB REPO!!!! OMG! Sorry I am too excited for this.

First repo is a flexible Toolbar/Tabbar. I have added a list of my Github repo in the left bar for future reference. Well, that's about it for this blogpost. I am thinking to redo the Switchy object as a proper repo next. Stay tune. Or not. Whatever dude and dudette.

Ps. I forgot to put the link to my main GITHUB REPO: GENECODE GITHUB

How To: Use Reusable Views Correctly (TableView, CollectionView, etc)

noreply@blogger.com (GeneCode) — Sun, 05 Nov 2017 02:14:00 +0000

First, some short intro! :D My blog views has finally reached ONE MILLION!!!

Now if I get a dollar for a view. Phew! None the less, I am so happy with this view count- why? Because it means I helped quite many developers to create their apps (hopefully). And those apps will benefit mankind. Even if it's a fart app, hey, it cheers up people and that is good.

As noobs we tend to not getting the whole picture of a particular UI object. A label is simple, there is text property, you set it directly in Storyboard or programatically (label.text = @"hello";) and it shows immediately. Pretty straight forward. But for objects that uses Reusable Cells like TableView, there are multiple set ups that we need to do to use it properly and therefore prevent any weird and unwanted bugs and crashes. Anyway here's what we're gonna end up with at the end of the tutorial:

It's a 2.4MB GIF.

What does Reusable Views mean?

It is basically a concept/method to display big amount of data in a scrollable area. In case of TableView, the amount of cells being created by TableView is only a small quantity that is enough to fit the visible area of TableView.

For example, if you have TableView of height 300, and each cells height is 10, then at least 31 cells are created at runtime. And when you scroll down the table, the cell that is being pushed out of view
at the top is moved to the bottom and its content is updated according to the datasource (code in cellForRow delegate). This is how Reusable Views work. And it is same thing with CollectionView or other objects or custom libraries with Reusable things. So no matter how much data you have, the amount of cells that exist in memory is only 31, at least.

Now that you understand this concept, you can code more efficiently and be able to code safely around it. Before we start to write code for our TableView example, we need to understand another concept that is MVC which means Model-View-Controller. We need to write code that comply with this concept and to do this we have to keep things separate.

The MVC Concept

In case of TableView, our Model is our dataSource. Our View is the TableView object in storyboard obviously. And our Controller is all the delegates functions. Our job is to create our Model that complies to our intention of the View behaviour, and connect Model and View with Controller. In normal English, we need to create our datasource (ie NSArray/NSMutableArray) that has all the necessary properties of the things in our cell and pass it to our delegates.

Lets Do It

Lets make a tableview that lists down a menu for a restaurant with details of the dish in each rows. Such UI is typical in many applications. How do we go about in designing this feature?

We need to create a custom object to work with. Our datasource will be an array containing these objects. So we need to decide what is the contents of our cell item. You can use dictionaries but trust me, objects is the way to go. Objects make coding a lot simpler and cleaner.

So I will split the process into the corresponding "section" of the design pattern:

a) MODEL
b) VIEW
c) CONTROLLER

But we'll start with VIEW first, since it's more fun. :P

Setting Up The "VIEW"

First, drag and drop a UITableView on your empty ViewController. Set the constraints. I leave it up to you how big you want the tableview to be. For me, I just size it up to fill the entire view. And then I drag the UITableViewCell object into the tableview. You should have something like the following.

Lets review our plan for the tableview cell (which is empty now):

Menu photo - (a UIImageView)
Menu name - (a UILabel)
Price - (another UILabel)
An icon if it is chef recommendation or not. (a UIImageView)

So lets add these items to our empty cell. I made the cell bigger by dragging the bottom edge of the cell downwards. Then adding all the items and arrange them as needed and set the corresponding constraints. I also changed the cell background color just for fun. Here's what I ended up with:

Next, we need to link the cell to our viewController.

If your table contents are simple, like a single text for each cell, you do not need to customize the cell class and you can skip the next step and just use the default cell style class like Basic, Left Detail, Right Detail or Subtitle.

To customize cell class, right click on your Project Navigator and select New File... then specify the creation of a custom UITableViewCell as shown in image below. I named this custom class MenuTableViewCell:

Now goto Storyboard and click on the tableview cell, and in the Identity Inspector, in Class textfield, key in the name of your custom cell class that you created above. In this case, MenuTableViewCell. This is a crucial step and if you miss it (many noobs do miss it, including me :D), you won't be able to connect the IBOutlet to the class header.

And then, connect all the objects in your cell to the class header. Give it meaningful names. Here is the completed header of the cell class:


//
//  MenuTableViewCell.h
//  Reusables
//
//  Created by Emir Fithri on 03/11/2017.
//  Copyright © 2017 geneCode. All rights reserved.
//

#import 

@interface MenuTableViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *menuImg;
@property (weak, nonatomic) IBOutlet UILabel *menuName;
@property (weak, nonatomic) IBOutlet UIImageView *menuIcon;
@property (weak, nonatomic) IBOutlet UILabel *menuPrice;

@end

Next, return to storyboard and click on the TableView cell and at the Attributes Inspector key in the Identifier of your custom cell. This is very important. For this example, I named it simply menuCellID. The ID is used by the TableView to distinguish if your table has multiple type of cells styles. Leave MenuTableViewCell.m as it is.

At this point, your custom TableView cell is completed and this concludes setting up the "View" part! Congrats :D

Setting Up The "MODEL"

Our Model is a collection of Objects in NSMutableArray. You could use NSDictionary as objects to store in the array, but custom objects will make coding a whole lot easier and cleaner.

Some options of our Model

So lets code our custom object first. In XCode, right click the project navigator on the left and add a new class. Name it MenuItem. Add the properties according to the details that we are going to add in the cell into the header file. Then create a standard init method for the class in .m file. We will end up as below:

//
//  MenuItem.h
//  Reusables
//
//  Created by Emir Fithri on 03/11/2017.
//  Copyright © 2017 geneCode. All rights reserved.
//

#import <foundation.h>

@interface MenuItem : NSObject

@property (nonatomic, strong) NSString *menuImgName, *menuName, *menuPrice;
@property (nonatomic, assign) int menuCode;


-(id)init;

@end



//
//  MenuItem.m
//  Reusables
//
//  Created by Emir Fithri on 03/11/2017.
//  Copyright © 2017 geneCode. All rights reserved.
//

#import "MenuItem.h"

@implementation MenuItem

-(id)init {
    self = [super init];
    if (self) {
        // you can initialize your properties here if needed
    }
    return self;
}

@end

Now to complete setting up our "Model", we need to declare our NSMutableArray to hold the menu objects, in the viewcontroller's header file:


@property (nonatomic, strong) NSMutableArray *menuArray;

Finally lets create the menu objects and fill them into the menuArray. We can do this in viewDidLoad. Remember to #import "MenuItem.h" in the viewController's header so we can use the class.



-(void)viewDidLoad {     
      [super viewDidLoad];     
    MenuItem *menu1 = [[MenuItem alloc] init];
    menu1.menuName= @"Fish & Chips";
    menu1.menuImgName = @"menu1.jpg";
    menu1.menuPrice = @"12.99";
    menu1.menuCode = 1;
    
    MenuItem *menu2 = [[MenuItem alloc] init];
    menu2.menuName= @"Hamburger";
    menu2.menuImgName = @"menu2.jpg";
    menu2.menuPrice = @"8.99";
    menu2.menuCode = 1;
    
    MenuItem *menu3 = [[MenuItem alloc] init];
    menu3.menuName= @"Beef Steak";
    menu3.menuImgName = @"menu3.jpg";
    menu3.menuPrice = @"21.59";
    menu3.menuCode = 2;

    MenuItem *menu4 = [[MenuItem alloc] init];
    menu4.menuName= @"Cappucino";
    menu4.menuImgName = @"menu4.jpg";
    menu4.menuPrice = @"1.99";
    menu4.menuCode = 1;
    
    MenuItem *menu5 = [[MenuItem alloc] init];
    menu5.menuName= @"Banana Split";
    menu5.menuImgName = @"menu5.jpg";
    menu5.menuPrice = @"11.29";
    menu5.menuCode = 1;
    
    MenuItem *menu6 = [[MenuItem alloc] init];
    menu6.menuName= @"Hot Dog";
    menu6.menuImgName = @"menu6.jpg";
    menu6.menuPrice = @"4.59";
    menu6.menuCode = 2;
    
    MenuItem *menu7 = [[MenuItem alloc] init];
    menu7.menuName= @"Grilled Chicken";
    menu7.menuImgName = @"menu7.jpg";
    menu7.menuPrice = @"25.59";
    menu7.menuCode = 1;
    
    MenuItem *menu8 = [[MenuItem alloc] init];
    menu8.menuName= @"Ice Lemon Tea";
    menu8.menuImgName = @"menu8.jpg";
    menu8.menuPrice = @"1.59";
    menu8.menuCode = 1;

      //initialize our array
      _menuArray = [[NSMutableArray alloc] init];
      [_menuArray addObject:menu1];
      [_menuArray addObject:menu2];
      [_menuArray addObject:menu3];
      [_menuArray addObject:menu4];
      [_menuArray addObject:menu5];
      [_menuArray addObject:menu6];
      [_menuArray addObject:menu7];
      [_menuArray addObject:menu8];
}

In this example, I added only 8 menu items. If you're feeling adventurous, you can go ahead and add as much items as you want. And the code I use is to make you easily understand the process so they are not simplified and not factored in anyway. You can simplify the code for menu item creation by creating your own class method in MenuItem.m, so you can simply call


  [_menuArray addObject:[MenuItem createWithName:@"Beef Steak" photo:@"menu1.jpg" price:@"21.59" code:2]];

I already covered about class methods and functions in previous tutorial: Basic of XCode Methods & Functions in Objective C. Do read it if you want to know more. And finally, of course, we have to add all our actual data (menu images, and icons). You can add them in the Asset folder.

With that, we have completed setting up the "MODEL" part.

Setting Up The "CONTROLLER"

Now here is where the functionality comes in. A Controller for any reusable views basically consists of delegates functions and dataSource link. Some developer or tutorials refers this to "Protocol". It means the same thing. Although, if we want to be concise, we can say that UITableView implements the Protocol, and our class that uses the UITableView's protocol, implements its delegates. You can open up a UITableView.h and see it for yourself:

This is how a class implements a protocol for other class to adopt and use. Get it?

As you probably have noticed, we have not connected our TableView to any IBOutlet yet. Now is the time to do so. And not only that you also have to connect other things on the TableView: In total we need to hook up 3 things:

i) IBOutlet
ii) Datasource
iii) Delegate

The above picture shows how to connect the dataSource of the TableView to the ViewController. Repeat this process for "delegate" underneath it. Then connect the TableView's IBOutlet (New Referencing Outlet) to the ViewController's header. This basically tells the iOS where it can find the delegate functions and the data for this tableView (which is in ViewController).

Next, open up the ViewController's header file and "implement the tableview delegate and datasource". Basically now we need to add Delegate and Datasource in our class because that's what our UI is looking for when we run the app. To do this, just add <UITableViewDelegate, UITableViewDataSource> in the header file. Your header will now look like this:


//
//  ViewController.h
//  Reusables
//
//  Created by Emir Fithri on 03/11/2017.
//  Copyright © 2017 geneCode. All rights reserved.
//

#import <UIKit.h>
#import "MenuItem.h"

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) NSMutableArray *menuArray;
@property (weak, nonatomic) IBOutlet UITableView *menuTable;

@end

Next goto the ViewController.m file and you can now enter the delegate functions of TableView. You can start to type -(void)table... and you will see code completion pops up a list of all the relevant delegate functions that you can use for the TableView. (If you don't, try hitting ESC button at the end of your typing.)

And that is just a list of delegates that of the type "void". There are delegates of other types too, like NSInteger, CGFloat, and so on. Good news is, you DO NOT HAVE to implement all of these delegate function to make our table work! I'd say the minimum is 3 delegate functions:


// TableView Delegates
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
       
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
}

The first delegate is to set our cell height. Eventhough we have manually changed the cell size in Storyboard, the tableView will still need to look for this delegate to set the height, otherwise it will use the default size. This is weird behaviour I know. It could probably be a bug, or a feature I am not sure. :D So lets add code to return the cell height.


-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 120.0;
}

Next, we need to tell the TableView how much data we are going to display. As you have added 8 objects to menuArray, we therefore can return this number to the numberOfRowsInSection delegate. How to do it? Simple, just use the count method of the array.


-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    return [_menuArray count];
}

Important: You should NEVER do calculations in this method. Because it can cause crashes in your app especially when the content of the array you use in cellForRow method does not match with the number you return here. If you want to filter the array, do it outside of delegate functions, load the filtered objects into another array, and return that array's count instead.

And finally, assigning our MODEL to CONTROLLER is using cellForRow method (read the comments to understand what each line does):


-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // we need to return a cell type to this method, so start with creating our custom cell with the cell identifier we specified earlier
    MenuTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"menuCellID"];
    
    // we also check if the cell is suddenly nil, and we recreate it
    if (cell==nil) {
        cell = [[MenuTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"menuCellID"];
    }
    
    // and here is where the updating according to our model occurs
    // first we get the object of the cell we're in (by using indexPath.row property)
    MenuItem *eachItem = [_menuArray objectAtIndex:indexPath.row];
    
    // then assign the values and data
    cell.menuImg.image = [UIImage imageNamed:eachItem.menuImgName];
    cell.menuPrice.text = eachItem.menuPrice;
    cell.menuName.text = eachItem.menuName;
    
    // as for chef recommended icon, we need a little conditioning
    if (eachItem.menuCode==2) {
        cell.menuIcon.image = [UIImage imageNamed:@"chef.png"];
    } else {
        cell.menuIcon.image = nil; // clear the icon 
    }
    
    // finally we return the updated cell to controller
    return cell;
}

And when you run the app, you will see it works flawlessly! And that's how you use any Reusables. For your own benefit, you can try to apply the same steps to UICollectionView. Try it!

That's all folks! Any questions? Shoot in the comment section. I may be late to reply tho but I'll reply when I can!

Can you use Deprecated Functions?

noreply@blogger.com (GeneCode) — Fri, 08 Sep 2017 00:40:00 +0000

Hey guys, I am making a few tutorials but all are in progress right now. Hope to publish them this weekend. Anyways, as a frequent StackOverflow visitor, I often read programmers wanting to change the functions they used that are deprecated. From their postings, I get that many programmers think that deprecated means "cut off" and therefore cannot be used indefinitely. This is, false.

Let us take a look at the meaning of the word first.

Basically, it means disapproved (or in layman terms, not advised to be used). It is not the same as totally cannot be used in which case the word is BANNED. Deprecated is not banned. It is only advisable not to use the function. BUT YOU CAN STILL USE IT.

In iOS developer terms, you can surely use a deprecated function, but you must start thinking/planning/coding of the new function to replace it in 4-5 years time. Deprecated functions normally are supported for a long time before they are removed. This is because often, Apple creates new and better frameworks for a thing. But there will be many apps that rely on that framework that are already in the App Store. So to immediately ban a function, is an act of oppression.

For example, NSURLConnection. It was introduced in iOS2.0. It's successor, the NSURLSession was introduced in iOS7.0. So since iOS7.0, NSURLConnection is therefore flagged as deprecated. But can you still use it in iOS10? YES IT STILL WORKS. In iOS11? Nobody knows (except the beta users right now). Given 3 versions of iOS has passed, you oughta change it by now.

But if it was *just* deprecated in iOS9 for example, no sweat because that function will definitely be available even in iOS11. So if you're doing a quick update of your apps, very old functions that are deprecated (like the ones intro'd in iOS2.0), should be replaced. But if the deprecation appear in iOS8 or 9, you're likely safe to leave it as it is for now.

Hope this post has been beneficial. Happy coding!

How to: Basic of XCode Methods & Functions in Objective-C

noreply@blogger.com (GeneCode) — Sun, 09 Jul 2017 06:29:00 +0000

Why ObjC?

Cause we're oldskool! :D

INTRODUCTION

When we start to code, what we need to do is write methods on top of the already available delegates (namely the View Lifecycles delegates like viewDidLoad or viewDidLayoutSubviews). A typical method that we quickly create is IBActions. These are automatically created when you drag an outlet in Storyboard to your header file.


-(IBAction)aButtonWasClicked:(id)sender {
  // your button was clicked by user
}

The aButtonWasClicked: is the name of the method. Note that I include the semicolon at the end. This indicates there is a parameter to be supplied to the method. So if you want to call this method elsewhere programatically, you need to write:


[self aButtonWasClicked:obj];

If you don't know what is obj, and sender is never used in the method, you can supply nil to it:


[self aButtonWasClicked:nil];

And if you want to supply it to a @selector() you do it this way:


@selector(aButtonWasClicked:) // semicolon is important

If you know what sender is (in this case, obviously a UIButton), you can make use of it by using TYPECASTING. Typecast is basically implying a certain type to a generic/unknown object. For example:


-(IBAction)aButtonWasClicked:(id)sender {
   UIButton *button = (UIButton*)sender; // this is typecasting of the sender obj which is type "id" to "UIButton"
   // now you can use button object properties.
   [button setTitle:"I was Clicked!" forState:UIControlStateNormal];
}

Okay. Now on to writing your own method - which is the cool part!. There are quite a few types of methods, but the most common ones are instance method and class method. Instance methods are the ones started with a dash "-". And class methods are the ones started with a plus "+".

INSTANCE METHODS

Instance methods are called by... drumroll... an instance of the object. Most instance methods are normally called by the viewController in which they contain, which is "self", hence we see [self... at the front.

Instance methods are most common, and there are a few variations of it. The most common that I use is like below:


-(void)setColorForView:(UIColor*)color andSize:(CGSize)size {

}

Lets break this method down. "-" indicates it is an instance method. The thing in bracket is the return value of this method. void means nothing. So you will get nil returned by this method if you call it by assignment. For example:


id value = [self setColorForView:clr andSize:size];

// value here will be nil always.

Next, setColorForView: is the NAME of the method AND it also acts as a selector name for the first parameter. andSize is the selector name for the next parameter. You can add to the method as much as you want. But be practical. Such method as below is ridiculous to say the least.


-(void)setColorForView:(UIColor*)color andSize:(CGSize)size andHeight:(CGFloat)height 
withFlag:(int)flag andViewController:(UIViewController*)viewCtrl 
andYourMom:(UIMom*)mom isFat:(UIFat*)fat {
 // crazy!
}

LOL!

Then you ask, what if I want to pass many parameters into the method? Well, you can simplify it by adding your parameters into NSDictionary and simply use:


-(void)setColorForView:(NSDictionary*)params {
   // get color: [params objectForKey:@"Color"];
}

Or, best way is to create a custom object with all the parameters and pass that instead of dictionary.


-(void)setColorForView:(MyParams*)params {
 // get color: params.color;
}

Better and cleaner method name right?

What if you want your method to return a value? Remember the void? Now just replace that with a type that you want to return. For example lets make the method return a Boolean:


-(BOOL)setColorForView:(UIColor*)color andSize:(CGSize)size {
 if (size.width>100)
   return YES; 
 else 
   return NO; 
}

Do you want to be fancy? a simple if/else statement can be reduced to a one-liner like this:


-(BOOL)setColorForView:(UIColor*)color andSize:(CGSize)size {
  return (size.width>0)?YES:NO; // woaaahh mindblown!
}

The method checks for size.width if it is over 100, the method returns YES, and if not returns NO. You can use this method like below:


BOOL widthOverHundred = [self setColorForView:color andSize:size];
// widthOverHundred now will be YES or NO depending on size value.

You can also return an OBJECT from instance method. For example:


-(UIColor*)getColorForView:(int)tag { 
  if (tag==0) return [UIColor redColor]; 
  else return [UIColor greenColor]; 
}

Note that an Object type name includes * to indicate a pointer to the object.

What if you want to return many values and objects??? Hopefully you've guessed it, just use NSDictionary or custom object.


-(NSDictionary*)getParamsForView:(int)tag {
    NSDictionary *dict =// construct dictionary here
    return dict;
}


-(MyParams*)getParamsForView:(int)tag {
    MyParams *params =// construct params here
    return params;
}

That's about all there is to know about instance methods, for noobs like us. Pretty easy peasy lemon squeezy.

CLASS METHODS
Class methods are similar, but implementation is different. I seldom use it except some special cases. A real world example of Class Method is


[NSString stringWithFormat:@"%d",val];

"stringWithFormat:" is the class method. As you can see, we can use it immediately using its class and there is no need for us to create an "instance" of the class before we use it.

Typically a class method is created in custom class. Or when you create a category of an existing class.

Consider a custom class called Vehicle.

With class methods we can init a particular vehicle with different types and the correct seatCapacity.


-(id)init {
 self = [super init];
 if (self) {
 // any default init setup
 }
 return self;
}


+(id)createCar {
  Vehicle *obj = [[self alloc] init];
  obj.seatCapacity = 5.0;
  return obj;
}
 
+(id)createBus { 
  Vehicle *obj = [[self alloc] init];
  obj.seatCapacity = 20.0; 
  return obj; 
}

To use it:


Vehicle *car = [Vehicle createCar];
Vehicle *bus = [Vehicle createBus];

Pretty cool eh?

Another useful type of Class method is the completion block (which I love very much). It is exactly like having an office boy who does errands for you XD and returns to you when the job is done. Completion block is extremely useful when you want to execute something that takes time, for example, downloading or uploading data. For example, here's a class completion block method to download an image file.


+(void)downloadImageWithURL:(NSString *)urlString
          completedWithData:(void(^)(NSData *data))completedWithData
                    failure:(void(^)(NSString *errorMessage))failure

{
    
    NSURLSession *session = [NSURLSession sharedSession];
    NSMutableCharacterSet *chars = NSCharacterSet.URLQueryAllowedCharacterSet.mutableCopy;
    NSURL *url = [NSURL URLWithString:[urlString stringByAddingPercentEncodingWithAllowedCharacters:chars]];
    NSURLSessionDataTask *task = [session dataTaskWithURL:url
                                completionHandler:^(NSData *data,
                                                    NSURLResponse *response,
                                                    NSError *error) {
                                    
                                    if ((error==NULL)&&([data length]>0)) {
                                        
                                        completedWithData(data);
                                        
                                    } else {
                                        
                                        failure(@"NO_DATA");
                                        
                                    }
                                    
                                }];
    [task resume];

}

Put this in your custom class, say, "DownloadManager", then in your ViewController.h import DownloadManager.h and then you can you it in your ViewController.m like so:


[DownloadManager downloadImageWithURL:@"https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg" completedWithData:^(NSData *data) {
        
        dispatch_async(dispatch_get_main_queue(), ^{
            self.myImage.image = [UIImage imageWithData:data];
        });
        
    }failure:^(NSString *errorMsg) {
        NSLog(@"ERROR: %@",errorMsg);
        
    }];

This is particularly useful when you want to have an asynchronous image downloader to be used with your TableView or CollectionView. Sure, the class method is not complete, for example, you should also add a way to save the downloaded images into a "cache" of some sort if you are using it with TableView/CollectionView. But here, I just want to demonstrate the Class block method.

So that's all there is to it as a basic introduction to Objective-C methods for iOS. I'll add more if I remember anything that I missed out. Meanwhile, comment below if you have any opinions. Thank you for reading!

How To: Seriously Plan and Design an iOS Apps or Games

noreply@blogger.com (GeneCode) — Sat, 29 Apr 2017 04:36:00 +0000

Hey whatsapp? (see what I did there? XD)

All these while we've been playing with XCode and making fun things without much care of how our app's structure looks like.

The thing about making an app/software, there are so many ways to do one thing. So many ways to code a feature. But if you are serious in making apps, you need to consider your app carefully and thoroughly, so that updating the app won't be a pain in the a$$ in the future. This is more so, when making your own app, or an app for a customer that may be requested to be updated in the future. The overall structure and back bone of the app needs to be as good and as organized as possible. Otherwise you'll end up crazy, trying to make sense of things in the app or when you want to add a new feature to the app.

So what you should do? I now will outline the necessary steps and points for you to consider when making an app.

1. APP WIREFRAME (UI PART)

This is perhaps the first most important part of designing an app. Wireframing is basically a sketch of how an app/game going to look like and how it will work. Page per page. It is best to go as detail as possible. For example, how many views it will have, and how does each view interact with each other. And also, what kind of animations, menus, confirmation dialogs, to have. What's important to note when designing the wireframe, you need to consider any views that can be REUSED, and those should be created once and the small variations therein be controlled by a property in that view. This is to prevent having multiple views that are very similar, and having similar codes in both views. It doubles or triple your job really - when you update on one view, you also need to do the same on another view. This is bad for you! Programmers must be lazy, and so he must create views as efficient as he can.

Anyway, here is an example of a wireframe of my app Blur.Depth that I made with an A4 paper.

There are plenty aspects of wireframing. For example position of buttons, controls, labels, are all important. You need to imagine a user using your app when you design it. Tab bars and toolbars normally are located at the bottom. This is because it is closest to user's thumb when a person uses a smartphone. It is safe to assume everyone is right handed (XD), so design your controls with that in mind. See the area where the thumb can reach.The top bar can also have controls, but should be minimized and not a control that user going to be using frequently.

In addition to the wireframing, you need to choose COLORS! Yes, colors play important role in your app. Normally you could choose a theme color. A color is important for people to recognize your app by. A clear example of this is Twitter and Facebook. Yes they both already chose and sticking with their color theme. Twitter a light blue. And Facebook a dark blue. It is not a must though. Some apps don't even have a theme color. But they use a certain shade of any color and it can work nicely. See below:

This is where your art skill going to shine. If you don't know art, you can learn like how I did. I chose Inkscape and learn how to create shapes and then made all my app's graphics assets. If not, you need to hire a graphics designer to do this for you.

To add, there are multiple tools out there to do wireframing. Even lets you run the prototype in your device. That way you can experience how your app is going to feel before actually start designing it. It is always good to have that chance. Decisions made at this time is crucial to how the app going to look and feel like at the end.

2. LANGUAGE CHOICES

Before you start to create a project, you need to decide which language you are going to code the app with. As of right now, Swift should be your choice. I started with Objective-C and are now well versed in it in my own style of coding, so I haven't made a single app on Swift (XD Im sure ill regret it later). And also choose if you are going to use XCode (Apple's official app IDE) or others (Xamarin, PhoneGap, etc). Xamarin uses C# (C-Sharp). Some even uses HTML/XML. AND, there are also app maker that don't even require you to code at all (but pretty limited what they can do). For me I always prefer native, but if you want to develop once for multi platform, then you can consider others. Game is much easier to make multiplatform than apps because game doesn't normally need platform specific controls. Once you decide that, then you can start creating a project.

3. SOURCE CONTROL OR NOT

Before I work with a company as an app developer, I never used source control. As such my source codes are stored locally in my machine. (Not smart, actually very dumb really). I make a backup copy once in a while into my iCloud. But many times I have experienced where I changed the code too much over a day and not happy with its direction. There is no way to undo this (Ctrl-Z dont work because I have saved it and close the project during lunch). The copy in the iCloud's progress was too far away back. Had no choice but to undo manually. So many times wasted there!

Source control deals with these kinds of issue superbly. The only problem is that for source control service to be private, you need to pay for it. Free ones like github or bitbucket, exposes your sources to all, but I'm not really sure I might be wrong. I haven't searched for a free private source control hub, but if you find any, feel free to share in the comment section. Or if you have your own server, you could setup a free source control service hub on your own server.

Source control is also great when you have multiple people working on the same project (but of different modules - because having multiple people working on same module will give you merging headaches). If you don't understand what Source Control is, in simple terms

Source Control is basically a multiple copies of your project stored at different times. Basically everytime you "commit" a project, a copy of it is added to the server together with a date-timestamp. And you can move between each commits by just double clicking the commits in its timeline and instantly your project in your machine will be updated to those copies. You can also have "branches" where a project splits into two (or more) so each branch is handled by a single developer working on different module of the app. These "branches" then can be merged upon completion.

There are free software to handle source sontrol such as SourceTree, or even GitHub has its own software too.

4. COCOAPODS OR NOT

I find that using CocoaPods is always best if you use native solution. Even when you don't use any library that they offer, it readies the app for future library usage. There are plenty of cool libraries in cocoaPods! For me, at most I use the admob cocoapods, because most of other objects I normally create myself (subclassing). But still it is nice to have a centralized location of library you use, so that you don't have to keep on downloading it when a new version is released. And some of the library you simply almost need to use an opensource one that are well made and used by many, for example the websocket library, SocketRocket.

5. STORYBOARDS OR NOT

If you decide on XCode, then you SHOULD REALLY use Storyboards! I know, I was a stubborn noob back then, sticking to xibs. But storyboards make your navigation between views much easier. So so much easier. And whether you use storyboards or not, you should also use AutoLayout with constraints. Constraints may look hard at first but it is actually very easy once you understand the concept. It is also much superior than the old ResizingMask.

6. CODING DECISIONS

Now comes the personal part. Coding decisions and styles.

You surely have your own styles, but to me it is important to ORGANIZE and always REFACTOR anywhere you can. If you are working in a team, it is probably best that you assign each module to a single developer, and only he will touch those modules. Anyway here is how my style of coding is:

A. I must have an AppConstants.h header in the app.

All the constants should be centralized here. Don't use AppDelegate or any of your singletons to store the constants. Among the constants that I store normally are color themes, server URL, and any static strings that I use like Error messages, dictionary keys, userdefaults keys, segueIdentifiers and so on. There shouldn't be any hardcoded values anywhere else. So when you want to change static values, you just open AppConstants.h and it's all there, and you change once and effective everywhere! Makes your job easy and not messy.

B. I have a common methods class.

I also have a common methods class, where any methods that are going to be used (or foreseen to be used) by many viewcontrollers are written. Examples of such methods are:

-function to make a view (or any of its subclasses) rounded. (layer.cornerRadius).
-check internet connections
-resize a UIImage
-QRCode generator
-save an image to documents folder (both png or jpg).
-save an image to tmp folder (png or jpg)
-load an image from documents folder
-load an image from tmp folder
-etc

C. I use delegates and avoid overusing the NSNotificationCenter and UserDefaults.

Delegates are a great way to interacting between two or more viewcontrollers. I just learnt about delegates last year (2016) and I am wondering why didn't I learn about this sooner. NSNotifications, while it works, it doesn't have a destination. It's like a guy shouting on a mountain, hoping someone in the town nearby hears it. Some people use userdefaults to keep on writing/reading data between viewcontrollers. This works, too, but... reading and writing causes extra battery usage. You want to make people use least power when they're using your app. And.... I know many devs will cry "Singletons are bad and evil", but for me Singleton is the best ever thing I learnt in programming. And let me quote a cocos2dx developer:

I use a single singleton, and frankly ignore the 'singletons are bad' cry-babies.

D. I try to keep with the MVC pattern.

Back in the early days, I don't really understand MVC. Probably still don't. But the idea of MVC that I get now make sense. You have to separate codes within their confinement. A model code should remain in model, the view code remain in view, and controller code remain in controller. A good example of this is when creating a UITableView. Your views, of course are the storyboard. The model is the datasource of the table, normally a NSArray or NSMutableArray. The controller is the tableview delegates. To make this follow MVC, you don't define the model in cellForRow (while that can work). What you do is define the model outside of the delegate (ie, you setup the data in viewDidload or other place), then you code the controller (cellForRow) to read the model only. This way, each MVC stays in their boundaries.

E. I organize my Project Navigator and arrange Storyboards nicely.

In the left panel of XCode there is a Project Navigator. It helps me to organize this. I create folders for each scenes. If you use libraries, then have a folder called "Library" and drag all of them there. Don't leave them all over the places. Organized Project Navigator allows me to find a class easily and quickly.

F. I use Meaningful Names !!!

Name everything meaningfully. Early this year I went to an iOS app developer interview just to see how valuable my app developing experience is. The company owner himself interviewed me. After completing a coding task, he commented quite a few things on my code and I agree with him completely. One of it was about the Project class naming. I left the default ViewController.m/h as it is... while it should've been renamed as MainViewController or something meaningful related to the Scene it represents.

Even variable names must make sense. Having a BOOL named "yesOrNo" is useless to the code reader (which could be yourself in 2 years). Long variable names are okay if it is needed to explain about itself. Something like _isWifiConnectionAvailable is totally good to me.

And last but not least, you should also give meaningful names to your graphics assets or any other assets that you use (video, mp3, wav etc). anIcon.png is about as descriptive as "I shit thru my a-hole". XD.

6. FUTURE PREPARATION

This is also important aspect of the app planning. What would you like to do with the app in the future? Most definitely you are going to need to update it. There is not buts in this. What additional features do you have planned for version 1.1, 1.2, etc? And do you want to offer additional features or are you going to just update according to latest iOS and focus on user experience?

Many apps developers adopt the "add feature" mindset to an app updates, which I oppose full-heartedly. As such, a small app with sufficient features, suddenly become this monster of a beast that is so ugly and it can transform to Optimus Prime and also make your coffee hahaha! But an app or software is not supposed to do everything. An app or software is actually supposed to do what it is designed to do, in the most efficient, and beautiful manner, with least bugs (hey we all must admit zero bugs is impossible).

So while developing, have in mind of the future updates you'd like to do. If you want to add features to a scene, make sure the control you choose for the scene now is able to cope with the additional feature in the future.

7. SUMMARY

After reading all the above, you should now have an idea how you should approach about making an app or game. With good planning and design and preparation, your app is going to be noticed by many people and people will love using it and don't even mind paying 99cents for it. Good luck!

How To: Create Undo and Redo in a Drawing App

noreply@blogger.com (GeneCode) — Sun, 26 Feb 2017 09:25:00 +0000

Hi guys.

I want to share how to create undo and redo in a drawing app. I tried using NSUndoManager for this, but it doesn't work. Why? I don't know. When something don't work, I tried for a bit, and if I have no more idea to try and work it out, I simply abandon the idea and try something else totally. There is no point lingering on something that you simply do not know.

The way to implement undo and redo is quite simple really. You just detect user's end stroke, and then save that drawn image into a MutableArray. This will eat memory a bit especially if you have a very big image. Alternatively you can simply store the drawn image in the TMP folder of your app sandbox use names like "undo0.png, undo1.png, undo2.png...". Have a global undo index variable to keep track of the undo/redo steps. When undoing, you -1 to the index, and load the image based on this index number. And when redoing, you +1 to the index, and load that image.

Something like this:


-(void)undo {
undoIndex -= 1;
NSString *imageName = [NSString stringWithFormat:@"%undold.png",undoIndex];
yourImage.image =  [self loadImageFromTMP:imageName];
}

-(void)redo {
undoIndex += 1;
NSString *imageName = [NSString stringWithFormat:@"%undold.png",undoIndex];
yourImage.image =  [self loadImageFromTMP:imageName];
}

Of course, you have to handle the undoIndex limits (>=0 and <maxUndolevel). Simple right? Kthxbai.

How To: Create Custom Objects in iOS Apps

noreply@blogger.com (GeneCode) — Sun, 04 Dec 2016 11:37:00 +0000

Hey guys. Another noobies tutorial!!!!! First, an intro. My latest app just been approved by Apple so I guess I will write about that (HA!! :P) The app is called QuikFlix. It is a movie database app. I made the app because I needed it. I was always trying to find old movies that I want to watch. For example, particularly, I wanted to find top/popular comedy movies in 2013. How do you go about finding that? Google works I guess. But navigating in browser really sucks. So I created QuikFlix with all the features that I WANT: Search movies by Genre, Year and Popularity. Plus, I added main casts list in there with movie synopsis. And you can easily see photo of the cast by tapping on their name. AND I also create a simple WishList so you can add movies you want to watch in this list. AND!!! I also added theme color. It is free app check it out here:

https://itunes.apple.com/by/app/quikflix/id1169970723?mt=8

I used TheMovieDB.com public API for this app. Their API is really good in my opinion. You can do a lot more actually (like have user accounts, rating ability).

Anyway intro finished, Lets begin tutorial. :D Here is what we're gonna make:

Cool huh? Btw, the more accurate title for this tutorial is "How to Subclass / Inherit an Object", but those words are intimidating aren't they? What does subclass means?

Well, it is simple, think of it like this - a factory produces a type of Computer Motherboard. You as a desktop PC seller, take this motherboard, add things on it, peripherals and what not, and voila you have your own desktop. Subclassing is much like this. The readily available objects in UIKit are like the computer motherboards in factory. You take that object, add stuff on it, make it do additional things and voila you have a "new" object.

To show you wonderful programmers how to subclass an object, we need to decide what to make first. Something easy but cool. We shall make a component for a calendar. A typical square with Day and Date, and we can tap on it to toggle the background color. With this object, we will make a month calendar. We will also try to make it support multi orientation so it appears nice in landscape or portrait.

First, create a single view application in XCode.

Next, right click on the Project Navigator panel and select New File... from menu. In the next window, select Cocoa Touch Class and click Next. Choose a name for it (in this case I name it "DayView") and select Class of UIView and click on Create button. You will see two files added to your Project - DayView.m and DayView.h.

Next, right click again the Project Navigator panel and choose New File... and this time, go to Resources in the left panel, and select View on the right panel. Click Next and name it DayView. You will see a DayView.xib file created in your project.

Now here is the important step to link between your Custom Class DayView.m/h and the DayView.xib you just created:

Click on DayView.xib's view and go to Object Inspector, and in Class textfield, type "DayView". Then press Return.

Next, add 2 UILabels on the DayView.xib. One will be used as the calendar "Header" where it will display Days (Sun, Mon, Tue, etc), and the other will be used to display the Date itself. Add the appropriate Constraints as you want. Here, I align the day label at the top left. and the date label at the bottom right. Then connect these 2 labels as IBOutlets in the DayView.h file.

You can add any object in here- for example, a UIImageView for background of the day cell, or another UIViews etc. Next, we need to write the init method for this DayView class. Enter the following code in DayView.m:


- (id)init
{
    self = [super init];
    if (self) {
        
        NSArray *arr =  [[NSBundle mainBundle] loadNibNamed:@"DayView" owner:self options:nil];
        self = [arr objectAtIndex:0];
        mode = 1;
        
    }
    return self;
}

What we do here is simple, we load the Xib file and return self in init method. So when the controller init this class, they will get the xib object as we have designed in storyboard. There is also a variable "mode" that I initialize here. "mode" is just an integer to be used to keep track of which day rect is being touched. If you require any more values/parameters to each "day", you can add them in the DayView.h file as properties, and synthesizing them in .m file. And then initialize their values in this init method.

Next, implement the touches delegate in this DayView and do the necessary changes when user tap on the day object. Here I simply toggle the background color Green<---->White.


-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    if (mode==1) {
        mode = 2;
        self.backgroundColor = [UIColor greenColor];
    } else {
        mode = 1;
        self.backgroundColor = [UIColor whiteColor];
    }
}

Now, in our main ViewController, we can already use our custom class by creating them in viewDidLoad.


    // create all dayviews
    for (int i = 0; i<35; i++) {
        
        DayView *dv = [[DayView alloc] init];
        dv.tag = 100+i;
        [self.view addSubview:dv];
        
    }

This code isn't complete. But this is how you create the custom class and add it to your view. You alloc and init it. Assign tag (so you can reuse it in other methods in the viewController), and add it to the view.

You also need to set the labels texts (can be accessed by using dv.dateLabel.text = @"12"; for example). I had to hardcode the total days in the month in this tutorial project so you will get the idea how to use the custom object. You need to work out how to assign the date/days of the actual month by yourself.

The final part is to resize and reposition the DayView object:


-(void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    
    // reposition and resize
    CGFloat wid = [[UIScreen mainScreen] bounds].size.width / 7.0;
    
    CGFloat xOffset = 0;
    CGFloat yOffset = 50;
    CGFloat dayHeight = 60;
    
    for (int i = 0; i<35; i++) {
        
        if ((i%7==0)&&(i!=0)) {
            xOffset = 0;
            yOffset += dayHeight;
        }
     
        DayView *dv = (DayView*)[self.view viewWithTag:i+100];
        dv.frame = CGRectMake(xOffset, yOffset, wid, dayHeight);
        xOffset += wid;
    }
    
}

viewDidLayoutSubviews is the View Delegates. This particular delegate gets called a lot, and it will get called when you rotate your device to landscape/portrait. It is a perfect place to resize/reposition your DayView objects.

That's all there is to it. Congrats now you have a month worth of calendar by using custom DayView object. Download the whole project by clicking icon below:

How To: Embed SpriteKit In UIViewController

noreply@blogger.com (GeneCode) — Sun, 27 Nov 2016 10:39:00 +0000

Time for another simple iOS Tutorial!

First, a witty intro. It is not always best to be the first. Sometimes, being last is best.

Ok, Lets get on with the tutorial then. It is really easy to add a spritekit scene in your viewcontroller. All you gotta do is add a UIView and change its class to SKView and add a scene to that SKView in the viewController.

Ok, thanks bye.

That'd be the shortest tutorial I ever wrote if that was the end of it. Relax. Here is how to do it, step by step. First, create a New Project. For simplicity sake, just create a single view application.

Next, open the Main.storyboard and add a UIView on it. Change its background color so you could see it better. The background color won't matter since this view will only act as a "container" to the SpriteKit view.

The gray color rectangle is the UIView we added earlier. The other objects I added just to show that this is just a normal UIViewController, thus you can add any UIKit objects on it like UILabel, UISwitch and so on. I also added constraints for the gray UIView so that it stays at the bottom (sorta status bar-like design). You can put it anywhere you like.

Now, before you do anything else, add the SpriteKit.framework to your project. This is really important (DUHH).

After you done this, go back to the Storyboard and select your gray UIView and open the Identity Inspector and in the Class textfield, enter "SKView" and press return. You should end up with the following:

This will make the UIView "become" the SKView and inherit all of its methods and properties. You don't really need to subclass the SKView (unless you want to do something else that's up to you).

Next, is to create an outlet for this "SKView". So click on Assistant editor, control click on the "SKView" and drag to the ViewController.h and name it "skView." There probably will be an error to it. Somehow XCode assign the skView type to "SpriteKit". Change that to SKView instead. Your IBOutlet should be like below:



@property (weak, nonatomic) IBOutlet SKView *skView;

After that, you need to add an SKScene to your project. To do that, right click on the Project Navigator on the left and choose New File... select Cocoa Touch Class, click Next and create a new class of SKScene as below:

Click Next and click Create on the next dialog window. You will see there will be 2 new files added to your Project Navigator on the left panel of XCode - MyScene.h and MyScene.m.

Now open ViewController.m, and import MyScene.h. And in the viewDidload delegate method, add the following code:



    SKScene * scene = [MyScene sceneWithSize:_skView.bounds.size];
    scene.scaleMode = SKSceneScaleModeAspectFill;
    
    // Present the scene.
    [_skView presentScene:scene];

And that is all there is to it! You have basically completed adding a SpriteKit scene into your viewcontroller. Of course, the scene is now empty, so you'll just see a black colored rectangle at the bottom.

I went ahead and create a simple scene where it scrolls randomly colored words (as SKLabelNode) from right to left. The words are hardcoded as objects in an NSArray in the Scene (open up Scene.m) to see.

And the result:

(it's a GIF image 3.5MB may take a while)

How To: Create Swipeable Tableview Cell with Any Objects

noreply@blogger.com (GeneCode) — Sat, 19 Nov 2016 08:20:00 +0000

Here is what we're going to accomplish:

(May take a while to show: 3.3MB O_O)

But first... digressing (as always)

AW YISSS!

Be The Bird - Happy With Breadcrumbs XD

Hey guys what's going on. Been a while since I last wrote any tutorial for you wonderful programmers. So today I found some time to write it. Something broke in my blog - the source code part doesn't appear as they should! I apologize but as I checked the code formatting widget sourcecode that was hosted on googledrive was removed by the owner! (WTF dude).

Anyhow, I needed to change my blog layout design too - as you can see now my blog theme has changed. Many things on the blog didn't work well. For example, you need to open a blog post first before you can read/post comments and so on. So after hours of searching I found an okay-ish blog theme from the blogger standard themes. I feel simplest theme is the best. I still need to find a replacement for the code formatting widget tho. T_T

Today I want to teach you how to make your UITableView cells swipeable. In iOS7 (or was it iOS8?), Apple introduce a new API to create swipeable tableview cells. But only limited to buttons (or "actions" as they call it). What if you want to have an image there? Well, if you want images, you still can assign image as the button's backgroundImage. But, what if you want a Switch there? Or TextView? Or thingamabob? (I love this word - THINGAMABOB).

The only way to achieve that at the moment, is to CUSTOM CLASS the UITableViewCell. OR!!! OR YOU COULD USE LIBRARY! Yep, there are multiple awesome libraries for swipeable tableview cells created by awesome, generous, developers out there over at GITHUB and other places. However, if you use library, you will not learn so much. This is why I prefer to do things my own, because I want to learn how it works. And you learn best, by doing.

So lets go.

First, create a single view application. Then you add a UITableView and set all the necessary constraints (sides and bottom to superview margin=0, and top margin to Top Layout guide). Then add a Prototype UITableViewCell on it. This is the cell that we're going to subclass.

1. HOW TO SUBCLASS OBJECT?

If you don't know how to subclass an iOS object, tough luck! HAHAHAH! Ok jk, I will teach you here. It is quite an easy task. First, you decide what is the object that you want to subclass (ie customize)? Here, we are going to subclass UITableviewCell. So, Go to XCode and right click at your Project Navigator and select New File... then select "Cocoa Touch Class" under the iOS group. Then click Next.

Then, in Subclass drop down menu, select UITableViewCell. Give a name of your new class - "SwipeTableViewCell". As you can see from the drop down menu, all iOS objects are listed here. You can subclass anything from here. Make sure you uncheck the "Also create XIB". We won't be needing a XIB since we already have the object in our storyboard.

Click Next and a dialog window will show requiring you to specify location to add the new class. Just click Create and then you will find 2 .m and .h files added to your project.

The next step is Critical - assigning your tableviewcell in the storyboard to your newly created class:

Observe the arrows. First, select your tableviewcell by clicking on the left panel (don't click on the storyboard object, because sometimes it will select tableview or the contentview instead). Then goto Identity Inspector on the right side panel, and enter your class name here. It should auto-complete by itself (if it doesn't autocomplete, it means you did not select a UITableViewCell object).

And... that is all there is to it! You are done subclassing a UITableViewCell!

2. HOW TO CUSTOMIZE THE UITABLEVIEWCELL

If you already know how to subclass a tableviewcell, you may skip this section and go to section 3 below.

Now, lets customize this cell. As of now, all you did was subclass it but it is still the same old tableview. You need to add objects and codes to modify/customize the cell now. The basic uitableview cell provided by apple already can display items, but it is limited to a few texts - depending on the style of cell that we created.

By default, it is "Custom" (and you need to subclass tableviewcell). But if you don't want to subclass the cell, you can still use the default cell XCode provided - you can use Basic (where there is one default label in it), or Subtitle (where there are 2 labels in it). But these styles are fixed. You can't add images to the cell. Or other objects.

Now, lets make a decision - what to put in our table. For simplicity sake, lets create a fixed data system that resides in the app bundle (hence is read-only). I created a small database in database.plist file in the following format:


[
   {
       Brand = "Honda"
       Model = "Fit"
       Price = "$10,000"
       Specs = "......"
    }
...
]

[ ] denotes array. and { } denotes dictionary.

I added 5 entries with various car types. And then I search for these car images and change their name to match their Model (the "Model" field in the data above), and added them to the project's Images.xcasset. The purpose is so that we can load the image with command like:



[UIImage imageNamed:[NSString stringWithFormat:@"%@.jpeg",[carDictionary objectForKey:@"Model"]]];

The plan is this: Display photo of car in each cells, with brand and model and price. And then user can swipe the cell to left side to reveal the car specs.

First, lets add the necessary objects in our customcell and create all the necessary constraints (Yes! all objects need constraints even inside a tableview cell!). Then connect them to IBOutlets in our customcell header file.

Now to load our database into the tableviewcell, we need to tell the Viewcontroller that our table is using it to load data. So lets do that - select our tableview and connect the delegate and datasource to our viewcontroller. We also connect tableview to a local property carTable so we can access it easily.

Now, lets create datasource for this table. A datasource is typically a NSMutableArray. NSMutableArray is synonym with tableview because both have indexes. Indexes are important because that is how data is ordered and arranged.

Declare a NSMutableArray *carDataArr and lets code loading our local database into this array.



    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"database" ofType:@"plist"];
    carDataArr = [[NSMutableArray alloc] initWithContentsOfFile:filePath];

Next, we need to implement the tableView delegates so we can return this carDataArr as the table's datasource.



-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row % 2==0) {
        cell.contentView.backgroundColor = [UIColor colorWithHue:0 saturation:0 brightness:1.0 alpha:1];
    } else {
        cell.contentView.backgroundColor = [UIColor colorWithHue:0 saturation:0 brightness:0.9 alpha:1];
    
    }
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    return [carDataArr count];
    
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    SwipeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"swipeCellID"];
    if (cell==nil) {
     
        cell = [[SwipeTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"swipeCellID"];
    }
    
    NSDictionary *eachCarData = [carDataArr objectAtIndex:indexPath.row];
    cell.carBrand.text = [eachCarData objectForKey:@"Brand"];
    cell.carModel.text = [eachCarData objectForKey:@"Model"];
    cell.carPrice.text = [eachCarData objectForKey:@"Price"];
    cell.carPic.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.jpeg",[eachCarData objectForKey:@"Model"]]];
    
    return cell;
}

And take a look at what we've accomplished so far!

Now we have all the data nicely displayed in the table. Congratulations! :D But wait, we have one more data to display: The car specs! As the tutorial intended: we need to make the cell swipable to left side and display the car spec behind the cell.

3. SWIPEABLE CELL!

To visualize how to make a cell swipable, take a look at the following diagram. In a UITableview (grey outline), there are many cells (blue outline) which conforms to its prototype. Inside each cells, there is a contentView (orange rectangle). What we can do is add subviews (green rectangle) behind this contentview and move the contentview to any direction and thus revealing the subview below it.

To achieve as the diagram, we need to add some codes to our custom cell class - SwipeTableViewCell.m/.h. Inside the awakeFromNib, enter the following codes: (read the comments to understand what each portion does).




- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
    
    CGRect containerFrame = self.contentView.frame;
    
    // create the textview and add to the contentview of the cell
    if (self.carSpecs==nil)
        self.carSpecs = [[UITextView alloc] initWithFrame:CGRectMake(containerFrame.size.width/2.0, containerFrame.origin.y,
                                                                       containerFrame.size.width/2.0, containerFrame.size.height)];
    
    [self.carSpecs setBackgroundColor:[UIColor clearColor]];
    [self setBackgroundColor:[UIColor colorWithRed:0.50 green:0.50 blue:0.50 alpha:1.00]];
    
    [self addSubview:self.carSpecs];
    [self sendSubviewToBack:self.carSpecs];
    
    // add the shadow to contentview to make it nicer
    self.contentView.layer.shadowColor = [[UIColor blackColor] CGColor];
    self.contentView.layer.shadowRadius = 5.0;
    self.contentView.layer.shadowOpacity = 1.0;
    self.contentView.layer.masksToBounds = NO;
    
    // CGFloat variable to track our cell movements
    _oriX = self.contentView.center.x;
    _xOffset =  self.contentView.center.x;
    
    // gesture recognizer to detect "swipe" which is actually panning
    UIPanGestureRecognizer *panLeft = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panLeftHandler:)];
    panLeft.delegate = self;
    
    self.gestureRecognizers = @[panLeft];
    
}

And then, we need to implement the gesture handler (ie what happens when user swipe our cell). Remember to add <UIGestureRecognizerDelegate> at SwipeTableViewCell.h. Then implement these 2 gesture recognizer delegate methods: (Again, read the comments to see what the code does)



- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)gestureRecognizer
{
    
    _oriX = _xOffset; // reset the starting location of cell
    
    return YES;
}

-(void)panLeftHandler:(UIPanGestureRecognizer*)panGesture {
    
    UIView *cell = [panGesture view];
    CGPoint translation = [panGesture translationInView:[cell superview]];
    
    // this is called when user lift finger from screen
    if ([panGesture state]==UIGestureRecognizerStateEnded) {
        if (_xOffset<self.frame.size.width/4.0) {
            // if offset is below treshold, move cell to "open" open
            [UIView animateWithDuration:0.35 animations:^(void) {
                
                self.contentView.center = CGPointMake(0, self.contentView.center.y);
                
            }completion:^(BOOL finished) {
                
                _xOffset = self.contentView.center.x;
                
            }];
            
        } else {
            // if offset is above treshold, move cell to "close" position
            [UIView animateWithDuration:0.35 animations:^(void) {
                
                self.contentView.center = CGPointMake(self.center.x, self.contentView.center.y);
                
            }completion:^(BOOL finished) {
                
                _xOffset = self.contentView.center.x;
            }];
        }
        
    // the following is called when user keeps on panning finger on the cell
    } else {
        
        // the 50 pixels buffer is to prevent accidental swipes during tableview scrolling
        
        if ((translation.x>50)) {
            // here we update the offset and move the cell's contentview following user's finger
            
            _xOffset = _oriX+translation.x-50;
            self.contentView.center = CGPointMake(_xOffset, self.contentView.center.y);
            
        }
        
        if ((translation.x<-50)) {
            // here we update the offset and move the cell's contentview following user's finger
            
            _xOffset = _oriX+translation.x+50;
            self.contentView.center = CGPointMake(_xOffset, self.contentView.center.y);
            
        }
    }
}

Finally, go back to our ViewController and now we can populate our "Specs" data into the carSpecs UITextView. Add the following line to the cellForRow delegate of our table.



cell.carSpecs.text = [eachCarData objectForKey:@"Specs"];

And that's all there is to it. You can replace the UITextView with ANY KIND OF OBJECT as you like. Just be sure to create them programatically properly. You can put multiple objects too, and objects like UISwitch, UIImageView, heck even a ContainerView.

How To: Fix XCode 7 Lag

noreply@blogger.com (GeneCode) — Tue, 17 May 2016 07:38:00 +0000

Hello darlings. This is not a coding tutorial but related to XCode so I post here.

XCode lag when switching between files?

I am using XCode 7.2.1 and Yosemite, and suddenly XCode lags when trying to switch between ViewControllers. I have tried many solutions suggested in internet:

1. Clear Derived Data
2. Clear Archives
3. Disable Spotlight Indexing

These somewhat make XCode works faster when building apps, but lags is still there when Im switching btw viewcontroller and/or xib files.

The lag also happens intermittently. Which makes it hard to figure out what's causing the problem. Then I searched further and found some people talking about TOOLTIPS in Apple Forum.

It seems to be the root cause. If you have files with long filenames (such as below):

Everytime your mouse hovers those truncated filenames, XCode tries to show tooltip for it, and that's when the lag happens.

What you do? Just WIDEN THE LEFT PANE. This seems to work for me. Do note though- after you widen it, and then you narrow it back, it becomes totally ok only after a while, it lags again. Just leave the pane widened till there is no "..." in the file names and you'd be okay all the way.

This is really funny problem I hope XCode devs team fix it soon.

How To: Using SLRequest to Upload Image or Video To Twitter

noreply@blogger.com (GeneCode) — Wed, 13 Jan 2016 07:08:00 +0000

Hi guys what's up. This is a simple tutorial so it doesn't have any downloadable project.

Today I'd like to share with you how to upload an image (like JPEG or GIF animation) to Twitter from the iOS app.

For a normal JPEG and status upload, you can use SLComposeViewController but you will face problem if you want to upload GIF animation or video file. That is because SLComposeViewController only has "addImage" method that takes up a UIImage object.

So you have to use SLRequest - a low level API communicator.

There was a simple API request called "upload_with_media" but Twitter has DEPRECATED it. It works now, but it may not work anymore in the near future and thus may break your app if you use that. So now you need to use 2 APIs to tweet text and image in one tweet. The processes involved is basically 2 - tiered jobs:

1. Upload image first - you will get the media id after upload completes
2. Update status with text and the media ID

As usual you have to request access to Twitter account before you can do anything with it. Once access is granted by user, you can then proceed to instantiate requests to twitter API host. Here's how to upload a media to Twitter's Media server:



NSData *imageData = [NSData dataWithContentsOfURL:fileURL];
NSURL *requestURL = [NSURL URLWithString:@"https://upload.twitter.com/1.1/media/upload.json"];
                    
SLRequest *postRequest = [SLRequest 
                                              requestForServiceType:SLServiceTypeTwitter
                                              requestMethod:SLRequestMethodPOST
                                              URL:requestURL parameters:nil;
                    
postRequest.account = twitterAccount;
[postRequest addMultipartData:imageData
                                         withName:@"media"
                                             type:@"image/gif"
                                         filename:@"test.gif"];
                    
[postRequest performRequestWithHandler:^(NSData *responseData,
                                                 NSHTTPURLResponse *urlResponse, NSError *error)
                     {

First, convert your image/video into NSData. Then create an SLRequest with NIL PARAMETERS with POST method as in code above. Set the request's account. Then add multipart data to the request.

The data type must be matching to what you're uploading. If it's a JPG then use "image/jpeg" if it's a GIF then use "image/gif" etc. Finally perform the request to start uploading the image to twitter's media server. This may take a while so you should have a UIActivityViewController pop up when doing this.

When the request is completed, the method will return responseData in JSON format. Convert this data into JSON.

Example of JSON data returned from twitter:


{
    "expires_after_secs" = 86400;
    image =     {
        h = 400;
        "image_type" = "image/gif";
        w = 400;
    };
    "media_id" = 687171095254859776;
    "media_id_string" = 687171095254859776; ---- THIS IS WHAT YOU NEED
    size = 705439;
}

Retrieve the media ID string as follows:


NSDictionary *json = [NSJSONSerialization JSONObjectWithData:responseData options:0 error:nil];
NSString *mediaID = [json objectForKey:@"media_id_string"];

Once you get the mediaID, you can then tweet a text with this ID using /statuses/update.json API.

 
NSURL *requestURL2 = [NSURL URLWithString:@"https://api.twitter.com/1.1/statuses/update.json"];
NSDictionary *message2 = @{@"status": @"Here is image",
                                                    @"media_ids": mediaID };
                         
SLRequest *postRequest2 = [SLRequest
                                                   requestForServiceType:SLServiceTypeTwitter
                                                   requestMethod:SLRequestMethodPOST
                                                   URL:requestURL2 parameters:message2];
postRequest2.account = twitterAccount;
                         
[postRequest2 performRequestWithHandler:^(NSData *responseData,
                                                      NSHTTPURLResponse *urlResponse, NSError *error)
                          {

The second request is just the same method performRequestWithHandler but with different requestURL. And that's how it's done.

Here is the complete code (including requesting access to twitter account):



-(void)uploadImageToTwitter {


        
        ACAccountStore *account = [[ACAccountStore alloc] init];
        ACAccountType *accountType = [account accountTypeWithAccountTypeIdentifier:
                                      ACAccountTypeIdentifierTwitter];
        
        [account requestAccessToAccountsWithType:accountType options:nil
                                      completion:^(BOOL granted, NSError *error)
        {
            if (granted == YES)
            {
                NSArray *arrayOfAccounts = [account
                                            accountsWithAccountType:accountType];
                
                if ([arrayOfAccounts count] > 0)
                {
                    ACAccount *twitterAccount =
                    [arrayOfAccounts lastObject];
                    
                    
                    NSURL *furl = [NSURL fileURLWithPath:NSTemporaryDirectory()];
                    NSURL *fileURL = [furl URLByAppendingPathComponent:@"animation.gif"];
                    NSData *imageData = [NSData dataWithContentsOfURL:fileURL];
                   
                    NSURL *requestURL = [NSURL URLWithString:@"https://upload.twitter.com/1.1/media/upload.json"];
                    
                    SLRequest *postRequest = [SLRequest 
                                              requestForServiceType:SLServiceTypeTwitter
                                              requestMethod:SLRequestMethodPOST
                                              URL:requestURL parameters:nil];
                    
                    postRequest.account = twitterAccount;
                    
                    [postRequest addMultipartData:imageData
                                         withName:@"media"
                                             type:@"image/gif"
                                         filename:@"test.gif"];
                    
                    [postRequest
                     performRequestWithHandler:^(NSData *responseData,
                                                 NSHTTPURLResponse *urlResponse, NSError *error)
                     {
                         
                         
                          NSDictionary *json = [NSJSONSerialization JSONObjectWithData:responseData options:0 error:nil];
                         
                         NSString *mediaID = [json objectForKey:@"media_id_string"];
                         
                         
                         if (mediaID!=nil) {
                             
                         
                             NSURL *requestURL2 = [NSURL URLWithString:@"https://api.twitter.com/1.1/statuses/update.json"];
                         NSDictionary *message2 = @{@"status": @"Here is the image",
                                                    @"media_ids": mediaID };
                         
                         SLRequest *postRequest2 = [SLRequest
                                                   requestForServiceType:SLServiceTypeTwitter
                                                   requestMethod:SLRequestMethodPOST
                                                   URL:requestURL2 parameters:message2];
                         postRequest2.account = twitterAccount;
                         
                         [postRequest2
                          performRequestWithHandler:^(NSData *responseData,
                                                      NSHTTPURLResponse *urlResponse, NSError *error)
                          {
                             // DONE!!!

                          }];
                             
                         }
                         
                     }];
                }
            }
         }];

That's all FOLKS!

How To: Pre-Process Tilemap Overlays in MKMapView

noreply@blogger.com (GeneCode) — Thu, 19 Nov 2015 07:17:00 +0000

Hi all.

Time for another tutorial. Recently I was trying to modify a tilemap returned from a typical public map overlay server (such as openstreetmap.org) - basically I needed a way to change black areas of the tile into transparent so that I could nicely overlay it on top of MKMapView. I searched for this for a while, found some solutions but did not really work as I wanted. Some examples used MKTileOverlayRenderer. Somehow that gave me weird results that I do not understand.

Note: In this tutorial there are no downloadable project since it is a straight forward MKTileOverlay subclassing usage. (But, if u really need a sample project, do shout in the comment section).

In your custom MKTileOverlay, you return the URL to load according to map rect using the normal URLForTilePath as usual. Then in the loadTileAtPath method, you process the *data variable.

Here is the example of the method:


- (void)loadTileAtPath:(MKTileOverlayPath)path result:(void (^)(NSData *, NSError *))result
{
    if (!result)
    {
        return;
    }
   
        NSURLRequest *request = [NSURLRequest requestWithURL:[self URLForTilePath:path]];
        [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
            
            if ([data length]<335) {
                
                result(nil,nil);
            } else {
                
                    CGSize sz = CGSizeMake(256,256);
                    CGRect rect = CGRectMake(0,0,256,256);
                    UIImage *img = [UIImage imageWithData:data];
                    
                    UIGraphicsBeginImageContext(sz);
                    CGContextRef context = UIGraphicsGetCurrentContext();
                    
                    [img drawInRect:rect];
                    
                    UInt8 *dat = CGBitmapContextGetData(context);
                    // int numComponents = 4;
                    long dataLength = CGBitmapContextGetHeight(context) * CGBitmapContextGetBytesPerRow(context);
                    
                    int  Comp1, Comp2, Comp3, Comp4;
                    
                    Comp1 = 0;
                    Comp2 = 1;
                    Comp3 = 2;
                    Comp4 = 3;

                    // This processes each pixels and convert the map to greyscale.

                    for(int index=0;index<dataLength;index+=4){
                        int aRed = dat[index+Comp1];
                        int aGrn = dat[index+Comp2];
                        int aBlu = dat[index+Comp3];
                        
                        float grey = (aRed+aGrn+aBlu)/3.0;
                        
                        dat[index+Comp1] = grey;
                         dat[index+Comp2] = grey;
                         dat[index+Comp3] = grey;
                        
                    }
                    
                    UIImage *tileImage = UIGraphicsGetImageFromCurrentImageContext();
                    UIGraphicsEndImageContext();
                    NSData *tileData = UIImagePNGRepresentation(tileImage);
                    result(tileData,nil); // return new data


                  
            }
        }];

}

As in the method above: Take *data and convert it to UIImage. Create a graphic context to draw on. Draw the map on that context. Then further manipulate the context pixels by pixels. Finally get the resulting image from the modified context and return as result.

Normal original openstreetmap tile (unmodified) loaded unto MKMapView as MKTileOverlay:

Change to grey (pixels to grey code given in the method above):

Change to invert color:

Change to High Saturation

Note: The air pollution markers are on another MKTileOverlay.

All these 4 map styles came from a single tileserver (openstreetmap.org).

Do take note that each time a tile (of size 256x256) is loaded, your custom class will process it with CoreGraphics with the code given. It is wise to keep the processing simple and not too heavy burden on processor.

LONG LIVE XIBs!!!! Create an iOS app without storyboards in XCode

noreply@blogger.com (GeneCode) — Sat, 03 Oct 2015 11:18:00 +0000

Are you one of those devs who don't like Storyboard? I didn't even bother to learn about Storyboards and how to use them. Call me stubborn noob that's ok. But I am so used to programmatically create things on XCode so storyboards are not my thang.

So how do you do this with latest XCode? If you go to New Project LO AND BEHOLD no such thing as a project without storyboards. All of them has storyboards. Unless you go with the absolute empty project.

What I will show you is how to select a Single View Project and then make it run without Storyboard. Let's go! First go to menu File -- New -- Project... and select Single View Application. Then follow the following steps:

1. DELETE THE FRIGGIN STORYBOARD!

Well, obviously, first thing to do it is to delete the storyboard!

2. Delete the "Main" text in Main Interface under General Tab in the target.

3. Right click your project in the left panel and select New File... and goto iOS - User interface - View and click Next. Give the xib name "ViewController" (basically same name as your viewcontroller.m and h).

4. Click on your newly created XIB file. Click on the File's Owner (yellow box), then click on the Identity Inspector tab, and type "ViewController" in the Class field. (see the red boxes highlighted in the image below)

5. Then click on the View part of XIB file and click on the Connections Inspector tab and connect the Referencing Outlet to the File's Owner and select "view".

6. Click your AppDelegate.h, and add these codes:

(see the red box highlights).

6. Then click on AppDelegate.m and add these codes in the appDidFinishLaunching method:

DONE!

That's all and you should be able to run the app and it will show an empty white View.

Finally, LONG LIVE XIB!

SKScrollView: SKSpriteKit ScrollView for Games Levels

noreply@blogger.com (GeneCode) — Sun, 27 Sep 2015 08:38:00 +0000

Hey guys how are you doing? Hope you are doing great.

I have a sample project to share. Well, as usual, I wanted to do something and then search around and most of available solution is way too complicated or not to my liking. So I MAKE ONE MYSELF. YAYYYYYYY xD Great way to spend my Sunday evening with a cuppa coffee.

So what I wanted to do is this:

If you haven't already noticed, this is a screenshot from the famous game Cut The Rope. Aww come on you should know this everybody loves OM NOM! Look at him:

Anyway, I wanted to have a scrollview of many worlds and each view has its own number of levels. Most solutions I found basically loads everything (all worlds all levels) into ONE SKScene. Wtf people. Good dev should avoid cramping everything and loading shitload of bytes into one scene.

So best way to do this is to make a General Scene and loads stuffs based on the world we're currently selecting.

Check out the GIF below (this is what I created and sharing to you all for free :DDDDD)

(Be patient the GIF is 1.1MB.)

There is only one level selector scene file. And the scene calls itself based on which world currently is selected. Total Worlds is defined in the ViewController:

  
 // STARTING WORLD AND TOTAL WORLDS SET UP
        NSUserDefaults *def = [NSUserDefaults standardUserDefaults];
        [def setInteger:1 forKey:@"World"];
        [def setInteger:3 forKey:@"TotalWorld"];
        [def synchronize];

If you want to have 5 Worlds to the project, please change the "3" to "5". You get the idea right.
The "World" key is the "Current selected world" variable.

Each world details are crafted inside PLISTs files inside the project - World1.plist for first world, World2.plist for second world, and so on. Each world plist has the following format:

You can add other keys and values as you want as long as you don't change the original existing keys and values.

Each World has a background image associated with it (you can also cut a big background into smaller pieces for each world and make a panorama landscape effect) - named World1.jpg, World2.jpg, etc.

Credits to http://hawk9mm.deviantart.com for the background images in this sample project.

Customizable variable:

long levelsPerRow = 3; // CHANGE THIS TO WHAT YOU NEED (eg 5 levels per row etc)

In GameScene.m, inside didMoveToView method, there is levelsPerRow variable that you can customize according to your liking. If you want to have 5 levels button per row, then change this to 5. Remember you need to make smaller level background images if you cramp more levels per row.

To detect button taps, we set the name of playButton to the level number and detect it in touchesBegan.

The rest is self explanatory I think. If you want to ask about anything, please comment. If you like this, share!

SKSpriteKit: How to fill SKScene background with a Texture? (Code Snippet)

noreply@blogger.com (GeneCode) — Wed, 12 Aug 2015 09:32:00 +0000

Yo guys.

Just submitted my latest iOS game. Check out the demo video here: FreakOut - Tribute to Breakout (iOS Game)

Anyways, I am updating one of my apps - Particle X to include the SpriteKit support. One thing that I need is to put a background texture to the SKScene background. In a normal UIView, we can simply specify self.view.backgroundColor = [UIColor colorWithPatternImage:yourUIImageHere]; and iOS will repeat that texture throughout the UIView. Which is cool.

But unfortunately there is no such method in SKScene.

The simplest method, is to add a single big SKSpriteNode in the SKScene, behind everything else (you can do this by specifiying its .zPosition to something really negative like -1000). Big sprite, however eats memory.

A better way (I think), is to auto repeat smaller sprites instead. This way you will not have any problem across different iOS screen sizes and the pattern appears similar without being stretched when screen sizes are different.

BEHOLD!!!! CODESS!!!!!

  
    float totW = 0;
    float totH = 0;
    int i = 0;
    int j = 0;
   SKTexture *tile = [SKTexture textureWithImage:img]

    while (totH<[[UIScreen mainScreen] bounds].size.height) {
        
        if (totW>=[[UIScreen mainScreen] bounds].size.width) { totW = 0; i =0; }
        
        while (totW<[[UIScreen mainScreen] bounds].size.width) {
            SKSpriteNode *bg = [SKSpriteNode spriteNodeWithTexture:tile];
            bg.zPosition = -100;
            bg.position = CGPointMake(i*tile.size.width, j*tile.size.height);
            
            [myScene addChild:bg];
            i ++;
            totW += tile.size.width;
        }
        
        
        j ++;
        totH += tile.size.height;
    }




Note: img is your seamless texture image in UIImage format. You can load it by using UIImage *img = [UIImage imageNamed:@"tile.png"];. And myScene in the SKScene name.



Check out the result:




(iPhone 6 size)






(iPad 2 Size)




FYI: there is tile~ipad.png and there is tile@2x.png in the project - normal image assets arrangements.




There is no downloadable sample project in this post since it is just a simple code snippet. Have fun and use as you like.



How To: SKLabelNode Border Outline Quick Hack
noreply@blogger.com (GeneCode) — Mon, 08 Jun 2015 06:36:00 +0000
Hey guys.



Today I would like to share you a simple hack on SKLabelNode. Since it is a simple snippet, there will be no project to download.



I am making my latest game (FreakOut) and was in need of SKLabelNode with outline. There are some 3rd party codes but I just want a simple and quick hack for it. So I made up this method:








  

-(void)popMessage:(NSString *)str {

    CGFloat fSize = 30*_xMult;
    SKLabelNode *msgLabel = [SKLabelNode labelNodeWithFontNamed:kFontName];
    msgLabel.text = str;
    msgLabel.zPosition = 100;
    msgLabel.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
    msgLabel.fontSize = fSize;
    msgLabel.fontColor = [SKColor colorWithRed:1.0 green:0.3 blue:0.3 alpha:1.0];
    msgLabel.position = CGPointMake(_mySize.width/2.0, _mySize.height/2.0);
    [self addChild:msgLabel];
    
    SKAction *enlarge = [SKAction scaleTo:1.5 duration:0.8];
    SKAction *fadeOut = [SKAction fadeAlphaTo:0.5 duration:0.3];
    SKAction *remov = [SKAction removeFromParent];
    
    SKAction *doIt = [SKAction sequence:@[enlarge,fadeOut,remov]];
    
    [msgLabel runAction:doIt];

    // ourlines
    for (int i=1; i<=4; i++) {
        SKLabelNode *outline = [SKLabelNode labelNodeWithFontNamed:kFontName];
        outline.text = str;
        outline.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
        outline.fontSize = fSize;
        outline.fontColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
        if (i==1)  outline.position = CGPointMake(_mySize.width/2.0-2, _mySize.height/2.0+2);
        if (i==2)  outline.position = CGPointMake(_mySize.width/2.0+2, _mySize.height/2.0+2);
        if (i==3)  outline.position = CGPointMake(_mySize.width/2.0-2, _mySize.height/2.0-2);
        if (i==4)  outline.position = CGPointMake(_mySize.width/2.0+2, _mySize.height/2.0-2);
        [self addChild:outline];
        
        [outline runAction:doIt];
    }
 }


Ok. What I did was add another 4 SKLabelNode BEHIND the main label. Pretty crude but it works.

Positioning is important for each one.



The result:









Not bad eh? Feel free to use the code and improve upon it.


Atari Online Voice Synthesizer
noreply@blogger.com (GeneCode) — Thu, 29 Jan 2015 13:44:00 +0000
WAZZZUUPPPPP





This is not a tutorial. But I have something cool for you. See I am in the making of my 5th iOS Game, then in need of some 8 bit voice. Freesound.org, gives me some. But I need to have it say a certain customized words. So I went on and search for the Atari Simulator for Mac. Found some, but I can't figure out how the heck do I install the speech simulator.




Upon searching further I encountered this cool online Voice Synthesizer that sounds exactly like the one I want - Atari version! So without further delay here is:










ATARI ONLINE VOICE SYNTHESIZER









Well Poop.
Blogger seems blocked my hosted js file.

But you can still get it to work on the original website:

http://simulationcorner.net/index.php?page=sam. 


Multiline SKLabelNode? Hell Yes Please XD
noreply@blogger.com (GeneCode) — Sat, 06 Dec 2014 01:22:00 +0000
Woah. Another Noobies Tutorial yayyyyyy....



Apple, naughty Apple. You made SpriteKit and SKLabelNode, but not make multiline labelnode. This is supposed to be expected!! OMG!! UILabel has multiline function, why not SKLabelNode?



Ok, lets not get crazy. Relax I am here to solve your woes.










As normal, I make this simple method to handle multiline SKLabelNode. Before we go on,

I'd like to give you alternatives (because some people already make some solution).



https://github.com/downrightsimple/DSMultilineLabelNode



The above isn't really a labelnode object. What it does is write down all the text with labelnode on a dummy space and capture it as image, and use that image as labels. Basically in your app it becomes SKSpritenode. This maybe is ok if you want a quick implementation. But capturing things into an image has lots of problems - namely memory usage, sizes (for example you need to cater for bigger screens making sure the image is not pixelated at high res, etc, etc).



https://github.com/nickfalk/NORLabelNode



The second method above is probably what you want if you prefer to have SKLabelNode that can use the "\n" (linebreaks). This is OK-ish. But I really don't like manually putting the line breaks. Especially if I change the wording then the line breaks need to be redone again, which SUCKSKKKKSK... but this solution is actually not bad.



OKAY! My method (which is obviously the best and smartest method XD) is to use SKLabelNodes, auto creating them through for loops depending on the length of string you have. You specify the rough character width per line, and this method autowraps it. It's like MAGIC. I know you will like this 10million times. XD



This is how the app will look like when you run it. Those are SKLabelNodes!







Ok now for the code. Read the comments to understand what each line does.





// For the sake of testing, I just use a dummy NSString and hardcode the string I want to display. 
// This string can be anything - even a string of paragraph that you retrieve from the web or pdf or whatever.
NSString *tmp = @"This is a long string where you do not need to bother about linebreaks and my method breaks it up into multiple SKLabelNode to roughly fit a customized width. Yep it works."; // long string - just type whatever in here
        
// parse through the string and put each words into an array.
NSCharacterSet *separators = [NSCharacterSet whitespaceAndNewlineCharacterSet];
NSArray *words = [tmp componentsSeparatedByCharactersInSet:separators];
        
int len = [tmp length];
int width = 20; // specify your own width to fit the device screen
        
// get the number of labelnode we need.
int totLines = len/width + 1;
int cnt = 0; // used to parse through the words array
        
// here is the for loop that create all the SKLabelNode that we need to 
// display the string.

for (int i=0; i<totlines; i++) {
 int lenPerLine = 0;
            NSString *lineStr = @"";
            
            while (lenPerLine<width) {
                if (cnt>[words count]-1) break; // failsafe - avoid overflow error 
                lineStr = [NSString stringWithFormat:@"%@ %@", lineStr, words[cnt]];
                lenPerLine = [lineStr length];
                cnt ++;
                // NSLog(@"%@", lineStr);
            }
 // creation of the SKLabelNode itself
            SKLabelNode *_multiLineLabel = [SKLabelNode labelNodeWithFontNamed:@"Oxygen Light"];
            _multiLineLabel.text = lineStr;
 // name each label node so you can animate it if u wish
 // the rest of the code should be self-explanatory
            _multiLineLabel.name = [NSString stringWithFormat:@"line%d",i];
            _multiLineLabel.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
            _multiLineLabel.fontSize = 20;
            _multiLineLabel.fontColor = [SKColor colorWithRed:1 green:1 blue:1.0 alpha:1.0];
            _multiLineLabel.position = CGPointMake(size.width/2, size.height/2+100-20*i);
            [self addChild:_multiLineLabel];
}



So that's all. Easy right? Feel free to improve it more. This method is ideal for games in SpriteKits.

For example when you want to make credits info, or a short storyline, or some instructions. It makes

creating and positioning the multiline text easy.



Have fun!







Edit: Shaun Hirst made a Swift Version (thanks mate)







func addMultilineText(Val: CGFloat )-> CGFloat  
 {  
   var Returnval = Val  
   let tmp = "This is a long string where you do not need to bother about linebreaks and my method breaks it up into multiple SKLabelNode to roughly fit a customized width. Yep it works."; // long string - just type whatever in here  
   // parse through the string and put each words into an array.  
   let separators = NSCharacterSet.whitespaceAndNewlineCharacterSet()  
   let words = tmp.componentsSeparatedByCharactersInSet(separators)  
   let len = countElements(tmp)  
   let width = 40; // specify your own width to fit the device screen  
   // get the number of labelnode we need.  
   let totLines = len/width+1  
   var cnt = 0; // used to parse through the words array  
   // here is the for loop that create all the SKLabelNode that we need to  
   // display the string.  
   for ( var i = 0; i < totLines; ++i )  
   {  
     var lenPerLine = 0  
     var lineStr = ""  
     while lenPerLine < width  
     {  
       if cnt > words.count-1  
       {  
         break  
       }  
       else  
       {  
         lineStr = NSString(format: "%@ %@", lineStr, words[cnt])  
         lenPerLine = countElements(lineStr)  
         cnt++  
       }  
     }  
     // creation of the SKLabelNode itself  
     var _multiLineLabel = SKLabelNode(fontNamed: "Oxygen Light")  
     _multiLineLabel.text = lineStr;  
     // name each label node so you can animate it if u wish  
     // the rest of the code should be self-explanatory  
     _multiLineLabel.name = NSString(format: "line%d", i)  
     _multiLineLabel.horizontalAlignmentMode = SKLabelHorizontalAlignmentMode.Center  
     _multiLineLabel.fontSize = 16;  
     _multiLineLabel.fontColor = UIColor.whiteColor()  
     let Top = Val-20*CGFloat(i)  
     _multiLineLabel.position = CGPointMake( self.size.width/2 , Top )  
     self.sharedInstance.addChildFadeIn(_multiLineLabel, target: self)  
     Returnval = Top;  
   }  
   // return last y pos sp we can add stuff under it  
   return Returnval  
 }