Pixel comic #2

next

Pixel comic

next

Your Japanese Name for iOS, part 22

Japan Name in App Store!

Graphics

I'm getting tired of having no gfx. So I will learn some simple pixel artistry for myself, so I can use it for games.

What to make next.

Now that I have one test app in the App Store and have just submitted another one, I think I have a pretty good idea how much effort it is to make stuff and how to get it published. At my current skill level it's about two weeks of effort to get an initial prototype of something very simple working. I have to come up with something revenue-generating now. I have a few years of runway from apps I previously made on Facebook and MySpace, but time passes fast.

In my imagination, devs often just create an app, put it in the app store and then feel sad because it isn't selling as well. Which isn't surprising because most people will never see the app unless they specifically search for it. My dream would be to have some niche app, priced pretty high say $5 - $20 per install, but paired with actual marketing. It could even be something that already exists in the app store, but with more effort put into spreading the word.

To get a bit of a break from coding, I think from now till christmas I will try to find such a niche by trolling obscure websites and forums, try to discover what apps those people might need and see if there is a way to get them interested in buying it. I imagine the best forums would be relatively popular non-geeky forums about some very specific interest that isn't properly catered to yet. Although looking at the app store I'd be surprised if any topic didn't have at least a few apps already for it.

I'm going to begin by reading the big boards list for some ideas.

Update: This sucks. I'm not making an app about pro wrestling or ponies or whatever does-not-interest-me topic unless I can get some proof that people would buy it. Or should I ... PONY PRO WRESTLING CHAMPIONSHIP. No.

Your Japanese Name for iOS, part 21

Motivation low point. My drawing routine ended up so confusing I couldn't manage to hack it to scale to a given size. This is required in order for "save as wallpaper" button to work. To make sure this project doesn't die at this point, I've decided to split the features even more. Instead of releasing version 0.5, I'll release a severely crippled version 0.25 just to get something out there.

It will only translate the name. It won't have share buttons, or sounds or anything. It won't be too popular because of the lack of sharing, but surely having something released is better than nothing and might give a boost in motivation. Besides, if I manage to add the other features in before the app gets checked by Apple, then this will just get the app released faster. Or does it put my app in the back of the queue again if I change it?

Had to rename app because "Your Name in Japanese" was too long to display in springboard (home screen).



...

Alright, it seems to work. Tested with one tester and no crashes or major problems (although the dictionary should maybe be a bit larger). Calling this version 0.25 and submitting. Now what was all that provisioning stuff again that I need to do... it was explained here. That also explained how to update the app (last section).

Name of upload program is "application loader". Need to click "ready to upload" in upper right in itunes connect to get it to recognize the app.

Your Japanese Name for iOS, part 20

Project difficulty = how many times I have to blog about it. Each post represents one block of effort. No post = no serious work that day. Name app reached 20 posts. So far Iworked about an equal amount as for Acey Deucey. In each post made less progress, some low days there. Could hardly bring myself to sit at the computer. Energy is back. Ready to give this the final push.

Dreaming about doing a Chrome Extension as the next serious project instead of an iOS app, but we'll see how I feel later. Got one pretty nice extension idea that has some revenue model built in too, and it isn't affiliate links.

...

Today tried to make a view class that would know how to display one vertical line of katakana text. Plan: scale this view to get different sized UIImages out of it. But impossible, views can't be scaled (?). Instead have to scale when drawing. Attempt to quickly hack it. Positioning and scaling code is tricky. Must try again tomorrow with clearer mind. Bigger picture is to get an UIImage that could be saved to Photos, so the user can use it as wallpaper on iDevice.

Instead set up iTunes Connect. Hoping could release this week.

Your Japanese Name for iOS, part 19

Entering a name now turns it into katakana!



I thought showing the characters vertically is just the same as horizontal, but actually it isn't. The vowel elongation character needs to be turned 90 degrees so it goes up-down instead of left-right. Also I'm missing proper consonant doubling character. Luckily it's the same as the "TSU" sound except a bit smaller, so I can just scale the TSU graphics I already have. Still need to test it more, should probably try to make it show every possible character to make sure it doesn't crash on anything and to see that characters are properly positioned. I'm guessing some of the smaller characters won't be displayed properly. But maybe I should work on some other part of this program now. Curious about how email will work.

I use the chrome browser. It doesn't work well with iTunes Connect site which is used to look at these graphs, so I wrote a Chrome extension that fixes iTunes Connect sales graph. I'm checking my sales stats for Acey Deucey every day. It's crazy, I thought sales would be zero, but instead I've been getting a sale or two every day. I can buy two delicious peanut butter sandwiches every week with this. Well, the government will eat at least half of the other sandwich.



Learned that it's possible to attach an image to an email as long as I save it as a file first. To get this file, I can turn the graphics context into an image and then perhaps do

NSData *imageData = UIImagePNGRepresentation(image);

I'm not sure if I should though. Pros are that the user might be more likely to send an email if the image is nicely displayed already in the preview. Cons are that it will require a bit more bandwidth from the user, only a few kilobytes though. Probably the user will not perceive this to be much, but who knows. Unknown if the recipient will find it less or more appealing to click through if the email already has an image or not. It might not be even displayed by default. Hmm.. probably easier and more reliable to just provide a link to an image in the mail, rather than the image itself. That's how e-cards work. Actually I should probably look at the layout of the emails some e-card companies send to get an idea what works.

Interesting, http://www.123greetings.com/ has an option for "Let me know when the receiver views this ecard". Maybe I should take this opportunity too to contact the sender again? And they just send a link to the site, so OK that's the best way to go. Where should the link lead though? Probably some page that shows the result and a link to the application. Most recipients probably wouldn't have an iPhone. Should probably indicate that the recipient doesn't need one.

I just sent you "Jackie" in Japanese.

You can view it by clicking here:
http://...

Keep it simple!

Your Japanese Name for iOS, part 18

The app will have two ways to convert latin characters into katakana characters. First one is a dictionary that I wrote with Nachi for Your Japanese Name on Facebook. If a name isn't in the dictionary, then the second way is an algorithm. Actually the algorithm is almost as good as the dictionary is, because the conversion is quite straightforward.

I wrote the algo originally in Python, where it was 6k in size. I just finished the Objective-C conversion and it turned out to be 8.5k. Luckily Cocoa had good unicode support, so it wasn't nearly as bad as I feared. Doing things like removing diacritics was as easy on both. Line with the difference was biggest was

r = s[::-1].replace("l", "r") 

Which in Obj-C became

+ (NSString *)stringReversedFromString:(NSString *)s {
 NSMutableString *reversed = [NSMutableString stringWithString:@""];
 NSUInteger len = [s length];
 for (int i = len - 1; i >= 0; i--) {
  unichar ch = [s characterAtIndex:i];
  NSString *charStr = [NSString stringWithFormat:@"%C", ch];
  [reversed appendString:charStr];
 }
 return reversed;
}

...

NSMutableString *r = [[self stringReversedFromString:s] mutableCopy];
NSRange replaceRange = NSMakeRange(0, [r length]);
[r replaceOccurrencesOfString:@"l" withString:@"r" options:NSCaseInsensitiveSearch range:replaceRange];

Acey Deucey part 18

Apple approved it!

Acey Deucey aka In-Between is up for sale!

I don't expect it to sell, but it feels great to finally have released something for an iDevice. I'll have much more confidence building more stuff, now that I know I can navigate the submission process.



Update: I made a sale! Who was it, someone from this blog perhaps? Thank you.

Your Japanese Name for iOS, part 17

Getting really tired of this project, but I'm going to finish it like a boss. What upsets me is that this turned out to be more work than I expected, but still the upside is very small. Maybe I picked the wrong risk-reward ratio here. Well, at least I'm learning a lot.

Inside my UISlider I'm adding a bunch of my own KatakanaView objects that render the SVGs I drew. Next I'll have to add support for variable sized characters. That means that the owner of the KatakanaView should decide the width, but KatakanaView decides the height and reports it back to the owner.

... why is the background of my UIView black, even though I'm not drawing it so?

Ah the backbuffer for a view gets initialized to zero by default. Have to set backgroundColor to UIColor clear and opaque to NO.



Basically it works, even calculates proper distance between views vertically. Now the characters are too small though. I can't just maximize each character horizontally, because they need to be consistent with each other. Might suffice to just experimentally increase size until it looks good.

Your Japanese Name for iOS, part 16

Today I hope to get at least AdMob working and display the SVG characters I made on screen. AdMob came with simple enough instructions, but after I included it in my project the app started crashing. I probably missed some step in their integration document or did something wrong, since their example works fine. Looking forward to their dashboard showing a non-zero amount for me.


I'm least looking forward to handling Twitter, Facebook and email. I suppose I'll have to recode some picture routines to run on my server too, as I might not be able to make the necessary attachments in the iOS program itself.

...

Got it working! Not sure why, but I had to connect the "Ad View Controller" in Interface Builder to an AdViewController IBOutlet in my own view controller, otherwise it would crash. Console said that the crash was because some method of a deallocated object was called. So does this connection somehow cause the AdViewController to get allocated? I thought everything I put into Interface Builder gets allocated and inited, otherwise how can all the text labels etc. work at all. I still really don't understand how IB and my code interact.

Discovered a nice debugging tip called NSZombieEnabled.

...

Seems I have misunderstood something about SVG. Even though apart from some scaling the coordinate system in my SVG files should be the same as in my iOS graphics context, things come out all wrong. All coordinates should be positive, but when I look at my JSON file, I have some negative ones there too. Are SVG path coordinates actually relative to something rather than absolute? Ah, seems to be relative to previous coordinate in the path. Yes!

Your Japanese Name for iOS, part 15

Did all the required icons during last night. It seems that mapping icon sizes to correct filenames is something I'll end up doing often. When making the icons naturally I want to name them "512x512.png" for example, but then when I add them to the project they need different names. So here's a list of commands, assumes you're currently in the art directory and want to move things to ../icons

#!/bin/bash
mkdir ../icons 2>/dev/null
cp 29x29.png ../icons/Icon-Small.png
cp 50x50.png ../icons/Icon-Small-50.png
cp 57x57.png ../icons/Icon.png
cp 58x58.png ../icons/Icon-Small@2x.png
cp 72x72.png ../icons/Icon-72.png
cp 114x114.png ../icons/Icon@2x.png
cp 512x512.png ../icons
ls -l ../icons
echo "Now add all these ../icons to the project, except upload 512x512.png later by hand to itunes connect."

Next I should think about how to make the characters appear. Next to each characters should be explanation of it in latin alphabet. There may be several characters, possibly dozen or more. Each one should appear as described in the SVG file. Maybe they could all be as wide as the screen is, and the white central area could be a UIScrollView. While they are appearing, the current character could be automatically scrolled to view. Then in the end it could scroll to the top. So all I need is an UIView subclass that knows how to display one character and I'll be able to stack several of those inside the scroll view.

Got more distracted and made another Chrome extension.

Your Japanese Name for iOS, part 14

Decided to split this app into two different versions. 0.5 won't guide the user in drawing their name, it will just display the result. 1.0 will include the drawing part. This way I can get something released while I'm still working on it, which should help motivate me complete this faster.

I think I'll make 0.5 free and try out AdMob to get some experience with mobile ads.

What should the main app screen look like? Tried mocking up a bit but everything looks horrible.



That list is supposed to show some popular names. Is showing the complete list of available names necessary? It's way easier to pick things from a list than try to come up with names to try without any hints. Most convenient would be if I could access their address book and show some names from there. In any case there should be a free input field in case the user wants to input something that's not in the list.

I already have an idea for the next app. I think it's an original idea, uses the platform well, is easier to make than Your Japanese Name and has wider appeal.

Update: New mockup for 0.5.



Progress is slow. Got a bit distracted and made a site for posting to Twitter using Chrome speech recognition.

Your Japanese Name for iOS, part 13

Description

You don't need to know any Japanese to use this app. Your Japanese Name turns your name into Japanese characters and even teaches you how to write it step by step. Surprise a friend by sending them their name over email or impress your friends by posting your result on your Facebook wall.

FEATURES
- Your name displayed in Japanese "katakana" characters.
- Step-by-step name drawing guide, learn the strokes to make the characters in your name.
- Real translation done by a Japanese person. Our hand-made dictionary has tons of popular names.
- Algorithmic translation as fallback in case you have an uncommon name, so you always get a result.
- Post to Facebook.
- Post by email.

DEMO MOVIE available at http://youtube.com/blahblahblah

Your Japanese Name for iOS, part 12

Gimpstorming what the icon could look like. It's easy enough to make something that looks not-totally-like-crap when a picture is big enough, but try to do it in 52 x 52 pixels and it turns into mush.



With an image this tiny it needs to contain some easy to recognize outline of an object with it and contrast has to be really sharp. I feel that a calligraphy brush isn't really something that people are familiar enough with that it would be recognizable as an icon.

...

Agonized over the icon whole saturday evening. Made some mockups, looked at tons of other icons for inspiration, but nothing really clicked. Maybe it's best just to go with the simple one I'm already using on the Facebook app, it'll make it more consistent too, not to mention less work.



I'm so envious of the beautiful icon Zen Brush has. The atmosphere of the colors, the mysteriously shaded bristles of the brush, the wooden texture of the handle... just perfect.

Your Japanese Name for iOS, part 11

All katakana done in SVG.

So much work and I'm not even halfway yet with this app -_-

Your Japanese Name for iOS, part 10

Morning. Now I know how to read data in with JSON, so it's time to extract that data from the SVG files. For this I'm going to use minidom, which conveniently is already included with Python. Input is going to be a directory of SVG files, and output will be the stroke, segment and waypoint JSON that iOS will then later read in. Minidom lets you deal with XML just like from Javascript. You can use things like getElementById and getElementsByTagName. In this case I wanted to get all the positions of the SVG elements:

dom = xml.dom.minidom.parse("some_svg_file.svg")
coords = []
for rect in dom.documentElement.getElementsByTagName("rect"):
 attr = rect.getAttribute
 coords.append([attr("x"), attr("y")])
print coords

With similar fiddling I was able to make a script that turns the whole directory into a single JSON file with all the info required to show the strokes, segments and waypoints. Next I need to complete drawing the remaining characters and then start working on reading this structure on iOS and showing the waypoints as circles.

...

Drawing these characters is a lot of work. 90% complete, tomorrow I'll have all 80 of them done.

Your Japanese Name for iOS, part 9

Today I should try to get the vector art done for a few characters at least.

Workflow:
- open SVG editor
- run google app engine launcher to serve frames
- use this SVG as skeleton:

<svg width="1280" height="960" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
 <g>
  <image xlink:href="http://localhost:8896/static/A.png" id="svg_1" height="960" width="1280" y="0" x="0"/>
 </g>
</svg>

- change image to be the current image (go in alphabetical order)
- trace segments in order (look at video if in doubt)
- draw rectangles for each waypoint in order, consequent segments can share same waypoint
- change color of rectangle when stroke changes
- save svg as A.svg for example



Drew half of the characters as SVG. Time consuming, but not impossibly so. A few minutes per character. Read about the SVG format. Paths are very simple to understand. How will I render these on the phone? I could either tessellate to triangles beforehand, or alternatively draw full paths with Quartz 2D. Yep, there's CGPathMoveToPoint and CGPathAddLineToPoint, so no need to do triangles. What next?

Next, to make some progress I should come up with a way to represent the data so I can easily access it from Objective C. Then, I should make a simple version where the waypoints for each stroke are shown and touching them correctly moves the user along.

Given JSON file "katakana.json" which as a test contains just

{"test" : "yeah"}

This prints out "yeah":

- (void) jsonTest {
 SBJsonParser *parser = [SBJsonParser new];
 NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"katakana" ofType:@"json"];
 NSString *jsonString = [NSString stringWithContentsOfFile:fullPath encoding:NSUTF8StringEncoding error:nil];
 NSDictionary *dict = [parser objectWithString:jsonString];
 if (dict) {
  NSString *out = [dict objectForKey:@"test"];
  NSLog(out);
 } else {
  NSLog(@"Could not parse JSON.");
 }
}

Acey Deucey part 17

"The status for the following app has changed to In Review."

And then almost right after:

"The Application Name on iTunes Connect is In-Between, while the name displayed when the app is installed is Acey Deucey."

Also they included specific steps on how to fix this problem. Awesome! I was expecting outright rejection with some vague reason. Instead I got a chance to fix this while it's still in review instead of starting over. ... Went into Itunes Connect and actually this IS a rejection. Application state is now "rejected". Oh well. Changed the name and reuploaded binary.