Saturday, June 06, 2015

Phaser for HTML5 Game Development

Just starting on an adventure in HTML5 game development using Phaser and thought I'd keep notes online. There's a bigger picture application goal that I have in mind, but it will start as a series of exercises and I want to record them while I'm learning.

First I wanted to create an example of a polygon moving around the screen using the cursor keys. After some exploration of the examples and reading documentation it boiled down to this basic example. First the index.html file:

1:  <!doctype html>  
2:  <html lang="en">  
3:    <head>  
4:      <meta charset="UTF-8" />  
5:      <title>Polygon Test</title>  
6:      <script src="js/phaser.js"></script>  
7:      <script src="js/polytest.js"></script>    
8:    </head>  
9:    <body>  
10:      <div id="phaser_game">  
11:      </div>  
12:    <script type="text/javascript">    
13:    window.onload = function() {  
14:      game = new Phaser.Game(500, 500, Phaser.CANVAS, 'phaser_game',  
15:                  { create: create, update:update });  
16:    };  
17:    </script>  
18:    </body>  
19:  </html>  

and the polytest.js file:

1:  var game;  
2:  var bmd;  
3:  var img1;  
4:  var bmdsprite;  
5:  var cursors;  
6:  function create() {  
7:    // used to detect arrow key presses in update function  
8:    cursors = game.input.keyboard.createCursorKeys();  
9:    // bitmap to draw onto  
10:    bmd = game.add.bitmapData(128,128);  
11:    // draw on the bitmap canvas  
12:    bmd.ctx.beginPath();  
13:    bmd.ctx.rect(0,0,128,128);  
14:    bmd.ctx.fillStyle = '#ff0000';  
15:    bmd.ctx.fill();  
16:    // use the bitmap data as the texture for the sprite  
17:    bmdsprite = game.add.sprite(200, 200, bmd);  
18:    // an Image is a lighterweight version of a sprite  
19:    img1 = game.add.image(50, 50, bmd);  
20:  // unfortunately, drawPolygon is not a canvas feature  
21:  // so a future effort is to draw the lines separately:  
22:  // http://stackoverflow.com/questions/  
23:  // 4839993/how-to-draw-polygons-on-an-html5-canvas  
24:  }  
25:  function update() {  
26:    if (cursors.left.isDown) {  
27:      bmdsprite.reset(bmdsprite.x - 15, bmdsprite.y);  
28:      img1.reset(img1.x - 15, img1.y);  
29:    }  
30:    else if (cursors.right.isDown) {  
31:      bmdsprite.reset(bmdsprite.x + 15, bmdsprite.y);  
32:      img1.reset(img1.x + 15, img1.y);  
33:    }  
34:    else if (cursors.up.isDown) {  
35:      bmdsprite.reset(bmdsprite.x, bmdsprite.y - 15);  
36:      img1.reset(img1.x, img1.y - 15);  
37:    }  
38:    else if (cursors.down.isDown) {  
39:      bmdsprite.reset(bmdsprite.x, bmdsprite.y + 15);  
40:      img1.reset(img1.x, img1.y + 15);  
41:    }  
42:  }  

as noted in the source code, I really wanted to use drawPolygon, but discovered it is a feature of Geometry in Phaser and not an HTML5 Canvas feature. From the code you'll see that both Sprite and Image objects are being used. Image may be sufficient in many cases.

Here's what the resulting screen looks like:


As far as tools, so far I'm using Brackets with Live Preview.

Handy links:

Phaser Cheatsheet: http://invrse.co/phaser-cheatsheet/
(root site is good: http://invrse.co/)

Amazon Dev Blog: https://developer.amazon.com/public/community/blog/author/Jesse+Freeman

Tuesday, December 09, 2014

Dashboarding Dos and Don'ts

Nice summary on dashboard design. It's about an hour, but worth the time.

Dashboarding: The Developers’ Role in Data Analysis
http://www.infoq.com/presentations/dashboard-data-analysis

Visual display
of
the most important information needed to achieve one or more objectives
which
fits entirely on a single screen
so it can be
monitored at a glance.

(Stephen Few)

Categories of dashboard:

  • Strategic (long term decisions)
  • Analytical (immediate decisions, explorable)
  • Operational (immediate decisions)

Don'ts:

  1. too big
  2. missing context
  3. excessive detail
  4. deficient measure
  5. inappropriate visualization
  6. meaningless variety
  7. poorly design visualization
  8. large lie factor
  9. poor arrangement
  10. bad highlighting
  11. chartjunk
  12. unattractive display

Dos:

  1. simplicity - reduce non-data pixels (data-ink ratio)
  2. simplicity - reduce data pixels
  3. highlight appropriately (color, position, form, motion)


Books:

Information Dashboard Design (Stephen Few)

The Visual Display of Quantitative Information (Edward R. Tufte)

Saturday, June 28, 2014

Push Notifications for HTML5 Web Apps (Not)

I've been helping a high school student with a senior project related to an app she is developing in HTML5. Push Notifications were desired and are of course one of the more useful aspects of having a mobile solution. Unfortunately, Push Notifications (without using a third-party solution) require a native app, at least at the present time for a broad iPhone/Android audience.


PhoneGap may offer a solution, but I've started on a research project into alternatives for developers wanting to offer a nice Web App solution supported by a third-party Push Notifications solution. Here are some links that I've found so far:



There are no doubt some text messaging service options that would provide another route for a solution that requires a capability like Push Notifications. I'll append these here over time.

Sunday, January 05, 2014

Culture Hacking

Ran across a couple of presentations that are relevant to building team culture, especially for virtual work groups. The first is a keynote by Jim McCarthy. I've been a long-term fan as he wrote a great book. See Pre-Agile Ideas: Jim McCarthy Videos for more. Here is the link to his keynote:

Culture Hacking
http://www.infoq.com/presentations/culture-hacking-singapore

Some interesting quotes (he's very quotable) and take-aways:

  • Get women involved! Technical teams lack diversity.
  • "I'm not a real historian, but I like stories from history"
  • "great editorial wall of China"
  • "everything you do should be art"
  • "team = product"
  • Feeilings are "mad, sad, glad, afraid"
  • "any process will work with presence"
  • Book: Flow (P.S.)
The other presentation that is full of tips for running virtual teams based on experience at InfoQ itself:

Culture and Happiness in Virtual Teams
http://www.infoq.com/presentations/culture-happiness-virtual-teams

Some interesting observations:


Some questions from my experience:

Do daily or twice weekly (Tue/Thu) virtual standups work well when there are language barriers? Sometimes written communication is more effective.

Saturday, January 04, 2014

Evils of Multi-tasking and Personal Kanban

Great presentation (30 minutes) on why multitasking is poor for productivity and how personal Kanban (and Kanban in general) works.

There is a great short exercise at the beginning of the video that illustrates the cost of context switching.

The Evils of Multi-tasking and How Personal Kanban Can Help You (by Sandy Mamoli)
http://www.infoq.com/presentations/multi-tasking-personal-kanban

Kanban in a nutshell: 1) visualize your work flow, 2) limit your WIP

I'm experimenting with a personal Kanban board made using a 30" x 20" project board:


The Pomodoro Technique is also discussed (http://pomodorotechnique.com/). I'm experimenting with a

Pomodoro App on my iPhone
 




Sunday, December 01, 2013

Using Selenium with Excel VBA

We had to change the names of 700 students in the student information system that I'm the product manager for at work. Instead of requesting that our support team write a database script, I figured it would be a good opportunity to try using Selenium (http://www.seleniumhq.orghttp://seleniumhq.wordpress.com) to rename the students using the browser user interface. In the past I have written VBA (Visual Basic for Applications) scripts to control Internet Explorer and I wanted to extend that approach to control Firefox and/or Chrome.

Excel VBA provides a very capable environment and the spreadsheet as an underlying model works very well for a class of problems. In this case we have a list of students already in the system and I added a couple of columns to contain the new first and last names. A simple loop through the rows using Selenium calls to manipulate the user interface and then record the results back in the spreadsheet is a straight-forward VBA macro.

Of course, without a VBA wrapper for Selenium this project would not go anywhere. I'd like to thank Florent Breheret for creating a wrapper and making it available as open source:

https://code.google.com/p/selenium-vba/

Viewing the source for the wrappers is important because some Selenium features are not implemented and other, non-standard, but helpful features are available (WindowHandles).

Selenium IDE for Firefox was invaluable. For my purposes, it's a script snippet recording solution that you then have to build your full scripts around using your environment of choice.

http://www.seleniumhq.org/projects/ide/

Stack Overflow was a helpful repository of answers for questions related to Selenium.

I ran into a problem with model dialogs, and ultimately didn't have to solve it because the script would complete what it needed to do with a simple On Error Resume Next. I may dig into this more at a later date. If I really get ambitious then I'll figure out how to edit/build the wrapper (requires C#).


After some debugging of the VBA/Selenium script (at the staging site first, and then with the production site), I was able to accomplish the renaming of 700 students without tedious manual effort. Creating Selenium scripts requires sleuthing the UI for the system you're trying to automate using Selenium IDE and the browser's tools. Of course if you already know the website and how it is coded it will be easier. If you have a site with frames and especially popups, you can expect it to take some time to have a script that works well. Also, plan to spend time making the script less fragile and smart about checking to make sure it is changing what you expect. For example, when changing the student names, I made sure to check the field that verified I was in the expected school district.

I did encounter one bug where the script would timeout. This happened after about four iterations of renaming students. The solution was to have the script logout of the system and then login every four renames. Definitely undesirable and if this continues to come up on future scripts I'll have to dig in more, but probably not without digging into C#.

I've just scratched the surface with Selenium for automation and of course it has great potential use for website testing. A future project will be to blend it with XCode to experiment with browser automation / testing from a mobile platform.

http://google-opensource.blogspot.com/2011/10/test-your-mobile-web-apps-with.html

https://saucelabs.com/appium/tutorial/2


Tuesday, October 22, 2013

Trying Another Mobile UI Designer Tool

I revisited the state of the design tools and decided to use Fluid UI (https://fluidui.com) for the project I am starting now. It has support for iOS7 elements and I like the feel of the UI. For previous thoughts check out my earlier post:

Mobile Design Prototyping
http://www.sidesways.com/2012/12/mobile-design-prototyping.html

When viewing the blog for FluidUI I ran across a nice summary blog post on 10 design principles:

Dieter Rams 10 Design Principles
http://fluidui.com/dieter-rams-10-design-principles/

Useful Graphics Sites

https://www.iconfinder.com