Communities / Forums
- Indie Game Jams List
- itch.io’s List of Game Jams
- One Game a Month
- Pixel Prospector’s List of Game Jams
Communities / Forums
In addition to a Ruby on Rails web application, SongLynx also has an Apache Flex component. As SongLynx’s technical founder, being able to develop Flex applications is a primary requirement for my computer. This post is the third in a series detailing how I set up a web development environment on a Samsung XE303C12 Chromebook. The first post, which you can read here, describes why I needed to do so, as well as getting a Linux environment with Ruby on Rails, Emacs, Git, and PostgreSQL set up so that I can work on projects stored in Git repositories on BitBucket and push the changes to a live site hosted on Heroku. The second (much shorter) post, located here, details how I configured Emacs more to my liking. This post details how I set up the Apache Flex SDK and integrated it into my workflow. My goals are:
Installing and configuring the Apache Flex SDK proved to be a lot more difficult than I originally anticipated. I think there were several things at work: 1) there are a couple of “official” places to get the SDK, and they each have conflicting instructions; 2) the community has invested a decent amount of time and effort to get things running, but many of those posts have become outdated; and 3) support for Flex-allied technologies is not uniform across operating systems — Adobe’s AIR, for example, is no longer supported on Linux. At any rate, on with the show.
Note: the instructions that follow are distilled from a fair amount of dead-ends; I’ve tried to ensure that I’ve untangled the various leads I followed and have only presented what’s necessary, but I can’t be sure that’s the case.
The first thing I did was download the SDK from its GitHub repository , navigated inside the directory, and switched branches:
git clone https://github.com/apache/flex-sdk.git cd flex-sdk git checkout develop
I followed the README in the cloned repository (also available at the GitHub repository webpage) pretty closely; it seemed to work where the instructions on the Apache Flex web page and in Apache’s Wiki did not. That being said, I think that some of the instructions are presented out-of-order; for example, telling you to set environment variables for packages that you don’t have yet seems a little odd.
The next thing I did was install the necessary additional packages: a legacy version of Adobe’s AIR SDK, an Adobe Flash Player content debugger, an Adobe Flash Player, Apache Flex Text Layout Framework, Apache Flex BlazeDS, Ant, and a Java SDK.
Note: I started in the directory /home/bill/Documents/workspace/flex. workspace is where I keep subdirectories like ror and flex with sub-subdirectories for each of my projects. Some packages we install below expect to be in the same parent directory as the Flex SDK; if you don’t do that, you need to set some additional environment variables.
wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRSDK.tbz2 mkdir air-sdk mv AdobeAIRSDK.tar air-sdk/ cd air-sdk/ tar -xvf AdobeAIRSDK.tar cd ..
wget https://fpdownload.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_sa_debug.i386.tar.gz mkdir flashplayer-debugger mv flashplayer_11_sa_debug.i386.tar.gz flashplayer-debugger/ cd flashplayer-debugger/ gunzip flashplayer_11_sa_debug.i386.tar.gz tar -xvf flashplayer_11_sa_debug.i386.tar cd ..
mkdir playerglobal cd playerglobal/ wget http://download.macromedia.com/get/flashplayer/updaters/11/playerglobal11_1.swc mkdir 11.1 cp playerglobal11_1.swc 11.1/playerglobal.swc cd ..
git clone https://git-wip-us.apache.org/repos/asf/flex-tlf.git flex-tlf cd flex-tlf git checkout develop cd ..
git clone https://git-wip-us.apache.org/repos/asf/flex-blazeds.git flex-blazeds cd flex-blazeds cd ..
sudo apt-get install ant
sudo apt-get install openjdk-7-jdk
Then I needed to create ANT_HOME and JAVA_HOME environment variables and add them to my path. I added the following code to the end of my ~/.bashrc file:
### Added by me to install Apache Flex export ANT_HOME="/usr/share/ant" export JAVA_HOME="/usr/lib/jvm/java-1.7.0-openjdk-armhf" export PATH="$PATH:$ANT_HOME/bin:$JAVA_HOME/bin"
Next, I moved into the flex-sdk directory and set up and environment properties file:
cp env-template.properties env.properties
I added the following lines (you’ll see the start of each line commented out waiting for you to uncomment and fill it in). Note that you’ll need to replace “bill” with your username.
env.AIR_HOME=/home/bill/Documents/workspace/flex/air-sdk env.FLASHPLAYER_DEBUGGER=/home/bill/Documents/workspace/flex/flashplayer-debugger env.PLAYERGLOBAL_HOME=/home/bill/Documents/workspace/flex/playerglobal
Then, I built the SDK with
And I also built the the ASDoc tool with
Next, I added the Flex SDK that I just compiled to my path, so that I needn’t specify the location of mxmlc every time I want to compile a program. To do so, I added the following code to my .bashrc file:
### Added by me for access to the Flex command-line tools export FLEX_HOME="/home/bill/Documents/workspace/flex/flex-sdk" export PATH="$PATH:$FLEX_HOME/bin"
I installed a mode for actionscript via M-x package-install RET actionscript-mode and adding the following to my ~/.emacs file:
;;===== Flex specific ===== ;;(setq auto-mode-alist (append (list \ ;; '("\\.as\\'" . actionscript-mode) \ ;; '("\\.\\(xml\\|xsl\\|rng\\|xhtml\\|mxml\\)\\'" . nxml-mode) \ ;; ;; add more modes here \ ;; ) auto-mode-alist))
When I open a .mxml, it’ll use nxml-mode. When I open a .as, it’ll use actionscript-mode.
Now that the SDK is installed, we’ve got access to the utilities from the command line without specifying the full path, and we’ve made editing our code in Emacs a little easier, I wanted to perform an end-to-end test. I started by creating a simple Flex project:
cd .. mkdir test-project touch helloWorld.mxml
Then, I put the following code into helloWorld.mxml:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="640" height="480"> <s:layout> <s:BasicLayout /> </s:layout> <s:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" /> </s:Application>
After, I built the application from within its directory with:
Finally, I copied it to my ~/Downloads folder and tested it in Chrome under ChromeOS. Success!
The steps I’ve described thus far give you sort of a minimally acceptable Flex development environment under Linux. There are some loose ends that could be tied up to improve the experience, but I haven’t had time to track them all down. Here’s a (non-exhaustive) list:
If you’ve followed along, at this point you should be able to develop and test Flex applications on your Samsung XE303C12. There are definitely things that can be improved, some of which I’ve listed in the Loose Ends section above.
After I set up a basic development environment on my Samsung XE303C12 Chromebook (details in this previous post), I wanted to customize my Emacs installation to better fit my workflow (Ruby on Rails web development, in particular). Here’s the list of things I did:
I use MELPA (in addition to ELPA) to manage my Emacs packages. I really don’t have an opinion on the MELPA vs. Marmalade debate: once upon a time I used MELPA and it’s worked for me, so I haven’t put any more thought into it. For the base installation of Emacs installed via apt-get, I couldn’t find any of the common initialization files: no .emacs, no .emacs.d/init.el, and no site-start.el. I made a .emacs file in my home directory and added the following, cribbed from , to enable MELPA packages:
(require 'package) ;; You might already have this line (add-to-list 'package-archives '("melpa" . "https://melpa.org/packages/")) (when (< emacs-major-version 24) ;; For important compatibility libraries like cl-lib (add-to-list 'package-archives '("gnu" . "http://elpa.gnu.org/packages/"))) (package-initialize) ;; You might already have this line
After getting MELPA working, I wanted to install a new Emacs theme. I like light-on-dark themes and syntax highlighting for editing code and text, so I wanted a theme that offered those things. I’ve used flatland-black in the past, so I decided to go with that again this time. I suppose if I ever switch to Sublime Text I’ll be in good shape, as this is a port of one of its themes for Emacs. I installed the theme from within Emacs via:
M-x package-install RET flatland-theme
Where M indicates the meta-key (alt, typically) and RET indicates you press enter/return and it’ll prompt you for input; in this case, it wants the package name you’d like to install.
I then edited my .emacs file to have the theme load on startup by adding the following to the end (after the MELPA block we added earlier):
(load-theme 'flatland-black t)
package-list-package opens a mini-buffer with a list of all the packages available in the repositories told Emacs it can look in. Then, I paged down to web-mode, selected it, switched to the newly opened mini-buffer that shows some details about it, and chose install. I opened a .erb file and used M-x web-mode RET to ensure that the mode loaded correctly.
After I was sure that the mode worked, I edited my .emacs file so that web-mode would automatically be started when I opened embedded Ruby (and some additional) files; The following is cribbed from :
(require 'web-mode) (add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.[agj]sp\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
My new-ish — I bought it in late January — Alienware laptop conked out on me. It won’t POST: the logo has a light but neither the fan nor the screen start. I bought it at Microcenter, so I took it back there to the support center. They’re sending it to Dell for repair: unfortunately it’s going to take 10 – 14 (!) business (!) days (!) to get it back. In the interim, all I’ve got is my old, busted up MacBook Pro that the Alienware replaced (late-2011, cracked trackpad, etc.) and a Samsung XE303C12 Chromebook (circa late-2012). I decided to try to set up a development environment on the aforementioned Chromebook, as the MBP is nightmarish to use unless I can plug in external peripherals (especially a mouse); that makes it pretty much only useful as a desktop.
This post chronicles the trials and tribulations of setting up a reasonable web development environment on the Chromebook. Honestly, in retrospect, I probably should have just used a cloud-based development environment like nitrous.io or set up a cheap AWS micro instance and tailored it to my liking, but I like the added flexibility of being able to work offline. I think I’m also probably cheap. Here were my goals with this project, broken up into bite-sized pieces:
I can’t remember how much this thing originally cost me; it looks like the MSRP was $250USD when it was released, so probably close to that. Right now, it’s available on Amazon for about $180USD; note that there’s a newer (and probably much more capable) model available at pretty much the same price. Unsurprisingly, things have come a long way since 2012-2013. 😉
Here’s the spec sheet for the little Chromebook that could: http://www.samsung.com/us/computer/chrome-os-devices/XE303C12-H01US-specs. It’s got an Exynos 5 Dual processor, a Samsung-designed implementation of the ARM Cortex-A15, 2GB of RAM, 16GB of eMMC storage, and an 11.6″ 1366 x 768 screen. TL/DR? It’s sort of slow, doesn’t have all that much memory, has a relatively small amount of slow(er) storage, and has a little screen. I made specific choices with respect to the development environment to try to account for these shortcomings.
I should also note that I actually do enjoy using it, despite what I said above about its specifications. I think the keyboard’s nice for the form-factor (it omits a lot of extraneous keys). It’s also really light and the battery life is decent.
There are (at least) 2 ways to go about getting a Linux environment on a Chromebook: 1) ChrUbuntu and 2) Crouton. ChrUbuntu will give you a full-fledged dual boot whereas Crouton runs side-by-side with ChromeOS. I went with the latter because anecdotal evidence seemed to suggest that it was easier to set up. I also haven’t maintained a full-blown Linux distribution on a laptop since college (early 2000’s) and my difficulty with it then colors my perception even now; that experience was probably my fault as I stubbornly insisted on using Slackware instead of one of the “beginner” distros.
The GitHub page for Crouton is here (https://github.com/dnschneid/crouton); it’s got detailed instructions about things like enabling developer mode, downloading Crouton, and running it. I also made heavy use of reference  (see below). The particular command of interest for my setup was:
sudo sh ~/Downloads/crouton -r trusty -t audio,cli-extra,core,extension,keyboard,xfce,xiwi
That’ll install Ubuntu Trusty Tahr with the XFCE window manager, integration with ChromeOS tabs, and a few extras. The Unity desktop is available, but given the specs I listed above, I thought I’d go with something more light-weight. Note: this step takes awhile.
Because I’ll be deploying my application to Heroku, I wanted an environment as similar to a Heroku dyno as possible for development and testing. That means PostgreSQL instead of MySQL, among other things.
The first thing I did after starting XFCE4 was install emacs (gotta edit those config files somehow):
sudo apt-get install emacs
I also created ~/.bash_aliases and added alias emacs=”emacs -nw” because I dislike the default behavior of opening a new window for emacs; I also think the X version is ugly.
I realized that man wasn’t installed by default (?!), so I installed that as well with sudo apt-get install man.
Next, I installed Ruby, Rails, etc. I mostly followed  here, so I started by installing the dependencies. This is as per : I didn’t prune out the MySQL or SQLite installations. I also didn’t install PostgreSQL yet; I did that later.
sudo apt-get update sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev
I’m using rbenv to manage versions. Again, following :
cd git clone https://github.com/rbenv/rbenv.git ~/.rbenv echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc echo 'eval "$(rbenv init -)"' >> ~/.bashrc exec $SHELL git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc exec $SHELL git clone https://github.com/rbenv/rbenv-gem-rehash.git ~/.rbenv/plugins/rbenv-gem-rehash rbenv install 2.3.0 rbenv global 2.3.0 ruby -vgem install bundler
Next, I set up Git per :
git config --global color.ui true git config --global user.name "YOUR NAME" git config --global user.email "YOUR@EMAIL.com" ssh-keygen -t rsa -b 4096 -C "YOUR@EMAIL.com"
Note: you’ve got to replace “YOUR NAME” and “YOUR@EMAIL.com” with … well … your name and email address, respectively. Then, I went to my BitBucket account and added the new key with “Chromebook” as the label. Finally, I tested my setup by successfully cloning my repository to my local machine.
I continued to set up Ruby on Rails. I needed to install NodeJS (dependencies! CoffeeScript, Asset Pipeline, etc.) and Rails.
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - sudo apt-get install -y nodejs gem install rails -v 4.2.6 rbenv rehash rails -v
As I mentioned before, my end-goal was to deploy an application to Heroku. To support that, I wanted my local development environment to match a Heroku dyno as closely as possible. Thus, I needed PostgreSQL; I set that up next:
sudo sh -c "echo 'deb http://apt.postgresql.org/pub/repos/apt/ precise-pgdg main' > /etc/apt/sources.list.d/pgdg.list" wget --quiet -O - http://apt.postgresql.org/pub/repos/apt/ACCC4CF8.asc | sudo apt-key add - sudo apt-get update sudo dpkg-reconfigure locales sudo apt-get install postgresql-common sudo apt-get install postgresql libpq-dev sudo apt-get install postgresql-client sudo service postgresql start sudo -u postgres createuser YOURNAME -s sudo -u postgres psql postgres=# \password YOURNAME
The wget command above threw a warning near the end that I didn’t explore further. I think it impacted my ability to get v9.5. My slightly modified commands install v9.3. The apt-get install postgresql-client was required to fix an “Error: You must install at least one postgresql-client-<version> package.” error. The last line will provoke a prompt to set a password for your PostgreSQL user.
Setting up PostgreSQL proved to be the most difficult part thus far. The commands I entered above are the end-result of beginning with the references listed below and additional iteration and Google-Fu to fix problems that cropped up.
At this point, I tested out my install by creating a new rails app, modifying config/database.yml (username & password and adding template: template0 to the default environment — otherwise you’ll get an error about an encoding mismatch when you try to create the database via rake db:create), running rails server, and checking the connection via Chrome in ChromeOS.
Next, I installed and configured the Heroku Toolbelt  via
wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh heroku login
The Heroku Toolbelt lets one provision dynos for an app, check their status, run commands on them, and push code to them — all from the command line.
Now that I’ve got everything installed, I performed an end-to-end test. I created a new sample repository in my BitBucket account, cloned that repository to my Chromebook, modified that repository (by creating a Ruby on Rails application in it), pushed my changes back to BitBucket, pushed my changes to Heroku, and checked the live application on Heroku.
I created the repository in my BitBucket account via BitBucket’s web interface. Then I set it up on my local machine, added a text file, and pushed it back to BitBucket:
mkdir sample-heroku-app cd sample-heroku-app/ git init git remote add origin email@example.com:derstander/sample-heroku-app.git echo "Bill Mason" >> contributors.txt git add contributors.txt git commit -m 'Initial commit with contributors' git push -u origin master
After this, I backed up one directory and used the rails generator via rails new sample-heroku-app –database=postgresql. I modified config/database.yml with my development environment credentials (including that template note above). I then made a new controller via rails generate controller welcome, added an index page at app/views/welcome/index.html.erb, and added the corresponding route to config/routes.rb. I also created the database with rake db:create. Finally, I tested it locally by starting up the server (rails server) and connecting via Chrome in ChromeOS.
Next, I made the modifications necessary to deploy the application to Heroku. I added rails_12factor in the Gemfile under the production environment, and ran bundle install. I also wanted to ensure that my local environment and Heroku were running the same Ruby version. I checked mine with ruby -v and added ruby ‘2.3.0’ to the end of the Gemfile. Then, I committed the files and pushed them to BitBucket.
Now it was time to deploy. I started by creating an app on Heroku via heroku create from the top-level directory of my application. Then I pushed the application via git push heroku master and migrated the database via heroku run rake db:migrate. Then, I visited the application in Chrome under ChromeOS (the application location will be listed in the push command; it might look something like https://shrouded-scrubland-53276.herokuapp.com/).
Now that I’ve got a fully functional environment, I backed it up. To do so, I needed to log out of it (though not out of ChromeOS) and used sudo edit-chroot -f ~/ -b trusty, where trusty was the name of my setup. I then moved the resulting .tar.gz to the ~/Downloads/ directory so that I could upload it to Google Drive. This’ll let me more easily restore my working system if something goes wrong; after all, Chromebooks seem to like to “powerwash” the machine to factory settings if they run into problems.
If you followed along, at this point you should (hopefully) have a fully functional development environment capable of creating a Ruby on Rails application, editing it, pushing it live via Heroku, and putting it under source control via Git — all on your Samsung XE303C12. This post might also serve as a starter in case you want to set up your XE303C12 to run Linux for something else. Not bad for a little Chromebook, eh?
I’ve had a long-time interest in Game Design & Development. Over the years I’ve even made a few terrible ones that will probably never see the light of day. Most recently, I took a couple of courses related to game design & development on Coursera: “Introduction to Game Design” by California Institute of the Arts and “Introduction to Game Development” by Michigan State University. The latter was mostly focused on the practical: the nuts-and-bolts of setting up Unity and making a few simple games. The former was mostly focused on the theoretical: the necessity of balancing difficulty to modulate player frustration and keep them interested. We even made several paper-based games, the descriptions of which served as simple game design documents. If/when I get around to it, I may digitize my notes from both courses and upload them here.
I’ve been interested in finding a decent template that I can use (and modify to expand, if necessary) for video games. It’s been in the back of my head for some time; this post is my attempt to get it out of there so I don’t use so many intermittent cycles on it anymore. I put together a template in Google Docs which I expect to modify as I gather more experience in game design and development. The template can be found here: https://drive.google.com/open?id=1eQxWKR2gOmO7z0pMX_lPT-POGzZmKqoccRG6HlyzBJs