Blog

A new FirefoxOS book about Game Development

Book Cover

A new book focused on Game Development

I am almost reaching the point where I can almost release the book. My idea is to release it as an early unfinished preview and allow readers to send feedback and enjoy it while I am still building it.

The Google Summer of Code is all about open source creations and its my belief that open source should also be open development so by releasing this book in early form I am able to invite you all to contribute to it.

Read More →

Jun 26 2014

Some toughts regarding the Firefox OS Tablet Keyboard

In this brief article I will expose my impressions about the keyboard used in the current Firefox OS version used in tablets. Please be aware that these tablets are reference designs used to improve Firefox OS in tablet form factor. What we see and discuss here is not what the final product will be.

This article is for the benefit of the Tablet Contribution Program run by Mozilla. This project aims to improve Firefox OS for tablet usage. An initial run of reference designs were seeded to many contributors who are bringing back improvements.

Since we're Mozilla, we do everything in the open and thats why this article is published here and not on some private walled garden.

Read More →

Jun 4 2014

Creating EnyoJS apps with Yeoman

EnyoJS Logo

What is Enyo JS

Enyo JS is a framework for building native-quality HTML5 apps that run everywhere! It begun its life in HP webOS (my favorite system ever) and was released as an open source project in the aftermath of the fiasco.

What is known as Enyo 1.0 is tied closely to webOS (a.k.a. a webkit based system). The Enyo team decided that with the open source release they should rewrite Enyo from the scratch to be compatible with other systems thus Enyo 2.x was born.

The current release is Enyo JS 2.4.0 and it is a gorgeous release sporting bindings, mvc, components, and more.

I will write more about Enyo JS as soon as I can but lets try to give you readers a glimpse of what it is all about.

Enyo is about components. Its about building reusable/shareable code into self contained components that may contain other components. Your app is a collection of these components structured in a elegant way.

I could go on for hours on why Enyo is a very elegant system but let me just give you one reason: Enyo JS core libraries and components are built in Enyo JS so if you know how to use the framework you can debug it, also if you read the framework source code you become a better Enyo coder.

You can check A Tour of Enyo to get a quick look at its features

There is a quick tutorial available at github wiki for enyojs/enyo and its very easy to follow.

Setup

This is a quick article about using Yeoman to scaffold Enyo projects. Yeoman and its friend tools are all based on NodeJS and you should have it installed before proceeding. If you already have NodeJS, Yeoman, Bower, Grunt setup then you can skip to the Install Enyo Generator section.

Install nodejs

You can fetch and install NodeJS from its own page. There is a chance that the package manager for your own platform has it too. Just check to see if it is not a version from ages ago.

Install Yeoman

Yeoman is a web scaffolding tool for modern webapps. It helps you generate the skeleton of your app and depending on the generator you use it is able to help you with many common tasks such as generating models, views and more.

Yeoman is a node package and can be installed with NPM after you have Node JS installed. The command below will install Yeoman.

$ npm install -g yo

We will use Yeoman to scaffold Enyo projects based on the Enyo Bootplate.

Install Bower

Bower is a package manager for the web. It helps you manage dependencies such as installing and mantaining popular libraries like jQuery, underscore, backbone.

Bower is also a node package that can be installed with NPM just like Yeoman.

$ npm install -g bower

We'll be able to use Bower to install libraries and components from the Enyo Community Gallery and from other internet accessible places such as GitHub.

Install grunt

Grunt JS is a task runner for JS projects. It helps you to run repetitive tasks such as minifying code, concatenating stuff, processins SASS and other files into their end product.

As with other npm based tools you can install it with:

$ npm install -g grunt-cli

We'll use grunt to run a local server to test our Enyo project.

Install the generator-enyo package

You can think of a generator like a plug-in. By using different generators, you get to choose what type of application you wish to create, such as a Backbone application, Chrome/Firefox extension or a Firefox OS app.

We'll install and use our Enyo Generator to scaffold Enyo Bootplate based apps.

To install the Enyo Generator package run:

$ npm install -g generator-enyo

Scaffolding your application

Generators operate in empty directories. Create one for your new project and run this commands:

$ mkdir my-cool-project
$ cd my-cool-project
$ yo enyo

The yo enyo line is the one that runs the generator. It builds a project based on the *Enyo 2.4.0 bootplate already including both the onyx and layout libraries.

Adding libraries

The Enyo Community Gallery holds many reusable components made by the Enyo Community. Installing them usually involves downloading the code from Github (or similar service) and dropping it into a folder in the lib folder (a.k.a. $LIB).

This process can become really tedious after some projects. To solve this the Enyo generator sets Bower to install stuff inside that library folder by default. This way you can use Bower to install stuff from Gihub as seen in:

$ bower install webOS-ports/webos-lib

Just remember to add the newly installed lib to your package.js.

Running a local server

The gruntfile comes with the connect task already set up. You can use it to launch a local server pointed at the deploy folder or pointed to root folder.

$ grunt connect:debug

or

$ grunt connect:deploy

This makes testing your Enyo project much easier.

Read More →

Jun 3 2014

Let the Games Begin! (or GSOC 2014 starts)

Playful Red Pandas

I've been accepted in Google Summer of Code 2014 as a student working with Mozilla.

My project (that can be seen here) is about creating game samples, an ebook and some reusable libraries to aid game developers working with Firefox OS.

My mentor is Soledad Penadés who is fantastic and builds awesome stuff at Mozilla. Check out her creations at 5013. I am pretty happy with this match because I will learn tons of stuff. :-)

Why games?

Games count for 50% of the app usage on mobile devices. Let that sink for a bit... Of all app categories, games count for half of the usage and all the other types of app share the remaining fifty percent. Games are so important that many developers distinguish between games and non-games application as being from different realms. No one places spreadsheets app and project management apps in different realms but people think of games as something so broad, so large, that it deserves its own category.

If games are so important for mobile platforms then it makes sense that we have great tools and documentation to aid new developers in becoming game developers. The fact is that even though we do have lots of documentation, it is all spread multiple MDN pages and wiki links and personal blogs. We lack a comprehensive collection of knowledge that can be easily followed, understood and shared by new developers.

If a game developer wants to learn something about Firefox OS itself then he can just browse MDN Game Development Zone for the information he needs. New developers that want to become game developers have no easy path to follow.

To solve this we're going to build a set of resources that when used together will teach new developers how to develop 2D casual games for Firefox OS.

Lets see what we're going to build...

Read More →

May 29 2014

Thinking about EME/DRM

I think people on the interwebs are confusing the smoke for the fire.

For those that haven't read how the new EME/DRM stuff will work: Firefox will have a sandbox to run the binary blob. The blob will not come installed on Firefox. The blob will not have access to the hardware or be able to fingerprint you. The sandbox is open source and can be compiled separate from Firefox so that people who want to make sure their sandbox has not been tampered by NSA/MAFIAA will be able to do so.

If you don't use services that use DRM such as Netflix, Hulu and Amazon then your Firefox will still be free from the evil binary DRM blob. If you decide to utilize such services then you authorize (explicit user action, like press a button and there is a message) the installation of the binary blob at the time you try to use the said services.

"As plugins today, the CDM itself will be distributed by Adobe and will not be included in Firefox. The browser will download the CDM from Adobe and activate it based on user consent." -- Andreas Gal, Mozilla CEO in Reconciling Mozilla’s Mission and W3C EME

If you're among the group that is against DRM on the web then instead of going into flamewars and hatred about Firefox having the EME spec you should just stop using DRM enabled services and show them where your convictions are. If on the other hand you want to consume said content then you will have the only open source sandbox that protects you agains hardware access and fingerprinting. Firefox still the best alternative even with EME/DRM.

Read More →

May 15 2014

Mozilla at Campus Party Brasil 2014

Mozilla at Campus Party

This year we took 15 people (Volunteers + Staff) to Campus Party Brasil which is probably the largest tech event/gathering in the world with eight thousand people camping at the venue and an unknown number of people floating at the expo area. Even though this event was organized at the nick of time, it was one of our best events ever. We had numerous activities planed among them 3 talks at the normal schedule (a.k.a. during the day), 5 talks during community schedules (a.k.a. so late it is almost day again), 1 workshop and 1 hackathon.

These activities were all great but they were not our main mission at Campus Party for we had a secret plan in our mind...

Read More →

Feb 10 2014

Help Save Torresminho the Cat

Torresminho Looking Sharp

Once upon a time, there was a frightened and skinny cat named Torresminho, because he raised himself at Noronha Torrezão street, who decided one day to help an SUV driver and change the tire of a moving car.

It didn't work. The driver, mad with the bad service drove away never looking back.

Uncle Andre and Aunt Lili who were passing by rescued what was left of the crying-half-broken kitten and drove quickly to the vet clinic.

Even though we can rebuild him, we have the technology we can't actually afford to pay the surgeries and treatment that he needs. Thats why we need your help to make sure this story has a happy ending.

What Actually Happened

Torresminho after rescue

Now in plain half-decent English: We were driving back home when we saw a little kitten lying down resting in the middle of the road. We managed not to hit him and stopped our car to rescue to little clueless cat. Lili, my wife, waved the car behind us that she was going to grab the cat. The car was an SUV that was far enough to stop or dodge our group. They never changed course and hit the 45 days old kitten. The driver never stopped, just drove away.

We picked the bloodied broken cat and drove to Pet & Vet clinic where he is undergoing treatment.

The Initial Crowdfunding Campaign

As soon as we rescued him and placed him under the care of the clinic we started a crowdfunding campaign to help treat him but we were naive in how much it would cost and we asked for way less money than we needed. Our initial campaign is already closed and we got 110% of our target which was close to USD 400. This was enough to pay for the first three days of treatment and the initial exams.

That first campaign got us about USD 400 but by the end of the week we had already spent close to USD 500. The costs started piling up and thats why we're making this page and a new appeal.

The State of Torresminho

Torresminho UTI

After many exams (X Ray, Ultrasound) we learn that Torresminho is OK inside (aka no broken internal organs) but his hips, left femur and front left leg are broken. Basically his left side and hips are a mess.

The first X Rays of Torresminho displays a Cat so broken that would not be willing to move but the reality is a bit different. Torresminho stands up and tries to walk, he loves to play and is in constant look for food and being pet. He purrs at the mere sight of us and one of the mostly friendly cat we've ever seen. Our little needy playful friend looks pretty sharp and we want him to heal completely.

Our whishes to see Torresminho treatment complete means that he needs to undergo surgery to fix his femur, Torresminho will become a hero to all cats because he is going full cyborg with some tiny metal plates. He could even pose as a pro bike racer or something after surgery. If we don't go to surgery, he'll limp, probably not be able to jump and one of his legs will be on an L shape like a Picasso painting. We'd like the Cyborg version better than the Picasso version. Unfortunately the surgery costs about USD 800 and we can't afford it.

Torresminho Needs You!!!

Torresminho Awwwnnn

Me and Lili are doing all we can do for Torresminho but we simply don't have enough money. To paint a clear picture into your mind, while I was writing this post, the cable TV guy came here to pick the Sky STB because we're canceling the cable TV to cut costs. If we're cutting cable, imagine how hard it is for us to pay for his treatment.

You can help Torresminho by donating money using the PayPal button below. If you can't contribute in a financial form to help this gorgeous sweet kitten then at least force all your friends and enemies to do it.

PayPal accepts all major credit cards. Help us help Torresminho. He already lost 3 lives by being hit by an SUV and surviving. He needs your help not to lose the few remaining lives he has.

Andre & Lili

PS: Whoever wants an update or see exam results from Torresminho can get them by sending me an email at andre@andregarzia.com.

Read More →

Feb 6 2014

DB Lib Goes Open Source with GPL

DB Lib is a minimalistic database library for LiveCode that works on Desktop and Mobile and allows you to build database-savvy apps without writing SQL directly. For example consider the following code:

dbWhere "country", "Brazil"
put dbGet("contacts") into tDataA
set the dgdata of control "contacts" to tDataA

It picks all records from the contacts table that have the country field equals to Brazil and set a datagrid to it. It's very easy to use. A more involved example:

on mouseUp
   -- assemble array
   put dbCardToArray("contacts") into tDataA

   -- check if we're adding a new record
   -- or updating an existing one.
   --
   -- this check depends on the record id being present.
   if field "id" is empty then
      get dbInsert("contacts", tDataA)
      if it is not a number then
         answer error it
      else
         answer "New Record Saved"
      end if
      go card "contact list"
   else
      dbWhere "id", field "id"
      get dbUpdate("contacts", tDataA)
      if  it is not a number then
         answer error it
      else
         answer "Record Updated"
      end if
      go card "contact list"
   end if
end mouseUp

In this code first we pick the data from a card using dbCardToArray(), a function that magically picks data from fields, buttons and other controls, and assemble an array that is used to insert or update a given record depending on the presence of an id field.

This is just a quick glimpse of what you can do with DB Lib. It is basically a ORM for LiveCode.

Dual License

Inspired by the current LiveCode open source edition, I decided to dual license this library using GPL, so all you LiveCode Community Edition users can use this cool library on your GPL projects.

If you want to release closed source software, you still need a commercial license but for open source stuff, you're free to go.

You can learn more about the library and download the GPL version by going to the DB Lib page.

Support & Feedback

Those that have questions or feedback, just hop by the forums. If you purchased DB Lib less than 30 days ago and feel you've been cheated by me going open source with GPL, you can get a refund by sending me an email at my usual address.

Please be aware that building this library takes time and that time is paid thru commercial licenses and donations, so if you think this library is useful, consider a donation or purchasing a commercial license. Each license buy a couple hours of work!

I hope you guys liked this initiative!

Read More →

Oct 25 2013

A simple publisher/subscriber library for LiveCode

This is a simple library I made to use in a game we're making where we needed a way for objects to interact with each other without hard coded object references. This pattern is known as the publisher/subscriber pattern or the observer pattern.

In this pattern objects can register themselves as listeners for specific events. Once an object triggers an event, all objects that we're listening for such event will receive a callback message. You can use this pattern to allow controls to react to events in your program without the need to hard code dispatch/send messages. A good example is a progress bar that listens for a message that is triggered by a download operation. The download routine would trigger this message without the knowledge of the progress bar, it is just broadcasting it like: "hey, I am downloading something" and the progress bar will listen for this broadcast and react to it. The code could be like:

on openCard
  put the long id of scrollbar "progress" into tTarget
  addEventListener "downloadProgress", "downloadProgressCallback", tTarget

  libURLSetStatusCallback "urlstatus"

  load URL myURL with message "downloadComplete"
end openCard

on urlstatus pURL, pStatus
  switch item 1 of pStatus
  case "loading"
    put 0 into tDataA["start"]
    put item 3 of pStatus into tDataA["end"]
    put item 2 of pStatus into tDataA["progress"]
    trigger "downloadProgress", tDataA
    break
  end switch
end urlstatus

on downloadComplete
  ## this is just cosmetic to guarantee that
  ## the progress bar goes to 100% once the download
  ## is completed.

  put 0 into tDataA["start"]
  put 100 tDataA["end"]
  put 100 into tDataA["progress"]
  trigger "downloadProgress", tDataA
end downloadComplete

In the given scrollbar script:

on downloadProgressCallback pDataA
  set the startValue of me to pDataA["start"]
  set the endValue of me to pDataA["end"]
  set the thumbpos of me to pDataA["progress"]
end downloadProgressCallback

This way we can change the UI that reacts to the download without touching the urlstatus message implementation. We could have many controls listening for the downloadProgress event. Also check out how both the urlstatus message and the downloadComplete message trigger the downloadProgress event. None of these messages have any prior knowledge of whom is receiving this event and nothing is hardcoded.

Using such patterns, you can decouple your user interface from the inner workings of your application easier than before. In our little game we have stuff such as objects broadcasting events like "exploded" and "died" so that other objects can react. Since in games you tend to create and destroy objects at runtime a lot, this library makes our life easier.

This library is released in the public domain. Use it as you see fit, can't sue me. To download this library, use the link on the sidebar (or link below if you're using a mobile device).

Read More →

Oct 25 2013

A brand new site

Welcome to my brand new site. Even tough I liked my previous system, I decided that it was no longer fit for my current work. My previous site was built on the early days of LiveCode server using a mix of RevIgniter and RevSpark frameworks. That site served me well for the best part of five years but the architecture I built was showing its age.

My previous site was built with a beautiful template but was not responsive and most of my current work deals with HTML5 and responsive web. Even though no one complained, I felt bad about selling mobile web sites and having a site that would not offer a good experience on smartphones or tablets. Then, a holiday came and I decided that labor day was a good day to build a new website for the next five years.

I decided to use DocPad which is a beautiful static page generator built on top of NodeJS. Even though I don't know much CoffeeScript I was able to patch the system and add the features I wanted. With a bit more than a days work, my site was running and I was ready to move my legacy content.

The new architecture

The new site is built using DocPad and the new pages are written in Markdown. DocPad generates all the static files and I upload them to the server using rsync. Since the site is no longer dynamic, I don't worry about performance.

The new layout is based on Twitter Bootstrap and is responsive. I can browse my website using my Geeksphone Keon running Firefox OS or my Android tablet running Firefox Aurora. My site has no admin interface so I don't worry about hackers exploiting the newest Wordpress zero-day or anything like that. In the end it is a new system that gets out of my way so that I can create new content with ease. I am very thankful to Benjamin Lupton for creating and releasing DocPad. It is a wonderful new tool for my work.

What about the legacy content

Some readers may be worried that I am leaving LiveCode. Don't be! I have firm roots in the LiveCode community and will keep providing my tools and developing new things. I still think that LiveCode is the best tool for creating Desktop cross-platform software fast and with a great ROI. The new LiveCode Community Edition is a dream come true. I plan to keep using LiveCode for a long time.

I ported some of my legacy content to the new site but not all of it. Some pages had outdated information that is no longer relevant to the current state of LiveCode. Among the ported content are all my current LiveCode commercial and open source projects.

The future

I am now a Mozilla Rep and am working closely with the Brazilian Mozilla Community to spread Firefox OS. Most of my current work is mobile web related and I spent my days inside HTML5/CSS/JS acronyms. So far it has been a wonderful ride and developing for Firefox OS is very fun and productive. I am looking forward to more volunteer work in conferences and gatherings. Soon my little mobile apps will be flocking the Firefox Marketplace.

I hope you all enjoy the new site. It will be more updated than the old one, mostly because its a much more interesting time to live on with all these new platforms and technologies emerging. Stay tunned for updates and send any feedback to my email

Read More →

Oct 25 2013
back to top