Lack of UI libraries in Angular Dart

So I'm still slowly chugging along playing with Angular Dart.

The thing that's bothering me now is, because the it's such a new language/framework, is the lack of decent UI stuff. I needed a pretty date picker for my test project. I could either use the HTML5 date picker which isn't supported in half the browsers out there, or write my own.  I guess I could alternatively import all of jQuery and figure out how to get Angular Dart to talk to a jQuery widget. Ugh.  I finally found someone that had written one using WebUI, a deprecated system for making widgets in Dart, and managed to port it over to Angular. (if you are reading this and need one, email me!)

Tonight it was an autocompleter that I needed. Again, I ended up spending awhile converting a WebUI widget. Which is great practice for learning a language and framework, so I'm not complaining too much. But it certainly cuts down on the productivity.

The way components in Angular Dart are written, I can envision a world with a huge library of simple-to-use UI components. It's MUCH MUCH MUCH cleaner than trying to pull in javascript libraries for a widget. But I guess there's just not any real community or momentum behind the project yet.

Oops

Huh, that's what I get for not proofreading my last post. Didn't realize Blogger was incapable of escaping my HTML for me, so it mangled my code. It's corrected now.

And so after playing with Angular Dart for a while longer, I'm really annoyed at the Dart to Javascript conversion. Plenty of stuff works wonderfully in Dart proper, but then fails with cryptic error messages once converted to Javascript. I'm not sure if that's just immaturity in the environment, but if not, it's a pretty big show-stopper. This platform only works if the compilation to javascript is relatively seamless.

A week with Angular Dart

So I'm taking a (hopefully) short break from RoboNinja. With the baby, I have a couple hours in the evening where I hold her as she's winding down.  By that time, and with the one-and-a-half-hands that I have available, I just can't bring myself to try to do any serious work on it.

So instead, I decided to spend a little time fooling around learning a new web framework (Since with a new technology, you spend as much time reading as you do actually typing!) I think I've mentioned before on there that I'm always looking for new web frameworks that try to make web programming not suck. (And the vast majority fail miserably). So this time I decided it was time to try Angular Dart.

Dart is a new language from Google that attempts to replace Javascript. It's not perfect, but it's a whole lot more "normal" -- it uses class-based OO, reasonable scoping rules, etc.  Since basically no browsers support it, it can compile down to javascript. So theoretically it can run anywhere.

Angular is originally a clever javascript framework (one of the few that, when I looked at it, I said "Oh wow, neat!" instead of "huh, more ugly javascript"). So now the folks at Google have been working at porting the Angular framework to Dart. It's pretty new, and still in flux, but it sounded fun to play with.

The general idea of it is that, instead of writing a ton of event listeners, DOM-modifying code, etc, etc, you write a view with HTML plus a few magic attributes, and it takes care of automatically keeping your view and your model in sync. The simplest example is something like:

<span ng-if="person.name != null">{{person.name}}</span>
<input ng-model="person.name" />

In this case, it's all operating on the "person" model, which is an object that I'm assuming exists. As soon as you start typing in the input, the span will magically appear (since person.name is no longer null), and the span will contain the person's name. As you type. Without setting up listeners or registering callbacks or using CSS selectors to find the span's DOM object. It's neat.  You also have a controller object sitting behind the view that takes care of getting the model object, doing any business logic (ie "onSave"), etc.

Then, to make it better, you can build your own new HTML element tags, which let you easily make your own components on page. So you can do stuff like make a new date-picker element that you can use all over the place as easily as:

<date-picker ng-model="person.birthday"></date-picker>

Which, without additional wiring, will update the person's birthday field as you modify it.

So I've been fooling around for the last week with trying to put together a fairly simple webapp with it. So far, it's been really fun and interesting (as opposed to most webapp projects!), although it hasn't yet been fast. The biggest problem so far has been a lack of documentation. Angular Dart just isn't very mature yet, and there's very little in the way of documentation.  Learning a new framework and language is always a slightly time-consuming process, and it's even trickier with a lack of resources.

Debugging has also been challenging. Because all the magic data-binding and DOM manipulation happens magically by the framework stuff, it's almost impossible to tell what's going wrong when the problem is with your HTML view. Dart has decent debugging facilities, but they really just apply to your Dart code itself, and not all the Angular magic. (unless you want to slowly step through the all the Angular libraries).

That all being said, it's been really fun and interesting to work through. I can't yet judge how productive overall the framework is, but it's definitely more pleasant and interesting than slogging through javascript event listeners and DOM manipulation.

New Baby

So, I just came here to say that our 3rd child, another girl, was just born!

That may slow things down a little. Or maybe, during the couple weeks I'm taking off work, where I spend hours holding a baby on my lap, unable to do much but sit still, I might actually make some progress. We'll see, we'll see. For now, enjoy a picture of my new little girl with a birthday cupcake that she can't eat.

Portable Checkpoint

It turns out I'm chattier when I'm more excited about the project. I'm still making progress, but was slogging through some code that was designed poorly, so it wasn't any fun. So I've been pretty quiet.

Fairly early on, I had decided a wanted a consumable "portable checkpoint" item that you drop right before a really hard section, so you wouldn't go crazy having to do a whole level over. Unfortunately, my item design had focused on the main character abilities, and didn't work well with consumable items. I finally slogged through that, when I realized that my checkpoint/respawn design also didn't work well with having a secondary respawn point.

So I ended up doing a ton of work, when I should have done significantly less if I had thought through my design better in the first place. 

The good thing is that I've been continuing to make progress on maps/levels in parallel. When I'm not in the mood to write code, I can turn off my brain and rough out a level map. Or use my brain and design the specific spike/jump/enemy patterns for that level.  Or if I'm sick of making levels, it's back to code.  So that works well.

So now I've got the portable checkpoint item working, along with a nice little icon. (Thanks Rob, for the icons!) And a couple more maps.

Now I need to actually properly test on my phone, which I haven't done in a few weeks. That always reveals new bugs that weren't obvious testing just on my computer. Not looking forward to that.

Back-story

My friend left a comment today asking some good questions about the story of Robo-Ninja. "Have you given any thought to the all-important backstory?" he asks. "Is the protagonist a ninja who became a robot, or a robot who trained as a ninja? And what does Robo-Ninja hope to achieve?"

So here's my rough draft. Who knows how much of this will change by the end (if there ever is an end!)  Like Anguna, I'm purposely going for a short and cheesy story:

One day, Professor Treeblot was finally putting his finishing touches on Robo-Ninja, his newest invention, a robotic ninja designed to defend the world from Evil Bad Guys.  But to his dismay, as he was finishing, the Evil Dr (insert name here) came, kidnapped Prof Treeblot, and scattered all of Robo-Ninja's ability modules throughout the land. Without these modules, Robo-Ninja could do nothing more than run forward.  Now Robo-Ninja must travel the land to search for and recover his lost abilities, so that he will be powerful enough to hunt down and defeat Dr (?) and save Professor Treeblot.

So you start the game with the ability to DO NOTHING AT ALL. Robo-Ninja just runs, you can't even control him. Luckily you pretty quickly collide with and equip your first ability module, the "Jump Servos", which let you jump.

So that's pretty much it. You search the world for your abilities, then use them to go find and defeat Dr (whatever).  Not much to it. And it only vaguely helps make sense of what you're doing in the game. But hey, like I said, I enjoy purposely making the story lame. (And yet that's what got the most complaints in Anguna) Oh well.

And if anyone has cool suggestions for the Evil Dr's name, I'm all ears. I'm shooting for something almost over-the-top silly for his name.

Oh, and my friend Rob just sent me some awesome icons he made for abilities, so that's taken care of. Thanks Rob!

Sliding and regressions

Well, as it usually goes, I didn't get much done on the game during the holidays. Although I did a little more than I feared.

Mainly, I finished the first of Robo-Ninja's powerups: the slide ability. He can now slide through narrow passages.  This forced me to flesh out my implementation of ability powerups, but my rough design was pretty close to what it needed to be, so this was pretty straight-forward. I ran into one hiccup where if you switched from "slide" mode to "jump" mode while still sliding, you'd never stop sliding, and could jump around while still sliding.  That was amusing.

The harder part was making the sliding not look stupid. I figured I'd do like mega-man and have a single-frame animation for sliding, and have him slide along the ground. Unfortunately, unlike mega-man, it looked ridiculous. So I'm playing with it to hopefully make it look a little better.

Mega-man makes this look awesome. Robo-Ninja makes it look ridiculous.

The other thing I'm running into is regressions of earlier bugs. My work on code for abilities suddenly threw off my jumping physics that I spent forever tweaking. Turns out I was now properly calling an update function that I had forgotten to ever call before. And that update function had left-over code that borked my jumping. Oops.

And I had originally added a delay that forced you to see the "new item acquired" screen before accidentally tapping and dismissing it as soon as it appeared. But somehow that stopped working as well. (The problem with it was that my delay timer was declared as an int, but I kept adding fractional (float) seconds to it. Which of course, got rounded away every time, so it never really incremented.) I fixed it now, but I'm not really sure how it actually ever worked right.

So now my son will be happy -- he bugs me every day or two to hurry up and add more abilities to the game. Really, he just wants me to add the "jet-pack" item that you won't get until the very end of the game. That way he can fly over spikes and never die. Maybe I'll have to do that one next....