Category Archives: html5

lirkr mobile view

Lirkr Angularjs & Bootstrap Update

Lirkr has had a recent face lift from the old.

Over the past few weeks I have been working on getting the ui rewritten in angular along with using Twitters Bootstrap as the style foundation. This was important for a few reasons; mainly rapid iterations and mobile support.

lirkr mobile view

Lirkr Mobile Supported News View using AngularJs and Twitter’s Bootstrap

 

Angular

First, it allows better caching of content loaded from the server and thus frees up the server to do more with less. Rather than returning recent searches I can simply store them in the application for later referencing and this is done quite easily thanks to angular.

Secondly, with angular everything is state based thanks to ui-route, a library that plugs into angular. Ui-route will allow the application to determine what state to use based on the url path. It also supports url variables, case handling for specific urls. Ie: default a certain directory to a specific state.

A heads up warning should be mentioned in regards to angular js. It isn’t the quickest thing to pick up as it does require you to wrap your head around best practices which can be flaky in the documentation. There are regular cases where one page will tell you the best practice is one way and the following page will say the complete opposite.

Bootstrap

Bootstrap was a good choice was deciding what to include in the client tech stack changes. It allows simple and easy desktop, tablet and mobile support. It’s as simple as adding classes to your containers and letting bootstrap work it’s magic.

Bootstrap has some lovely documentation with the addition of generating css that contains what you want and removes what you won’t need. By using this tool you can trim what isn’t needed right out of the gate and get yourself a smaller css sheet.

Summary

You can view the changes to the website here.

There are some significant changes. The first big change is the lack of search engine optimization; there isn’t any. The website loads into states and the states are all javascript. Unless google uses the v8 engine and meta tags on the site are added, there will be no crawling.

The second big change is the url paths. I went from having ‘/news/tech’ to having ‘/#/news/tech’ This was caused by the urls that are required in order to drive the angular states. Even with the added vhost changes I couldn’t see a way to keep the old url scheme.

Particles: Isometrics

Currently the only real work that has been going on is updates to the crawler and getting all of the resources figured out. I have set aside a little bit of time to work on particles. Particles is a javascript engine that can easily be added into a phonegap build.

I have gone on in previous posts about the projects and the intentions I have with it. If you would like to read more about it then I suggest that you go here: Shameless project plug

I have started working on an isometric view that will allow scaling and in the future panning. All of this requires me to build an overhead grid that the isometric view and renderer will plug into.

If you are interested in the project then I suggest you fork a copy or get in contact with me. All of the information can be found on the repository wiki pages.

Shameless Project Plug

Git hub is where it is at these days and so is the mobile application market place. (or so I hear) I have been working diligently, 5 minutes a day, on a project called Particle. What was going to be a particle engine written in javascript turned into something much more than just a particle engine. It became a beast. A monster. A Javascript engine like all others.

The idea is to create an application framework for mobile application development using Javascript. I would like this project to tie into the all mighty Adobe-Apache Cordova Project, not officially of course, but enough hooks that will be configurable to easily be used with Phonegap.

Features

Particles will allow rapid development and prototyping of canvas based applications. Some of the features are:

  • Error logging through console and stored in the application as a stack allowing displaying of different levels.
  • Handlers that will allow different renders to the canvas. ie: Isometric, 2d, faux 3d, etc.
  • Easy set-up for browser application, or mobile.
  • Configurable resource loading.
  • Application state handling.
  • Dynamic canvas resizing.

Code Repository

All of the code for the application will be stored on Github. Which can be accessed here. If you would like to partake or use the code base feel free to use the fork although I am looking for people to work on the original code base.

Particles Code Repo

Sumsumsum.com updates

If you are following along with the recent posts of what has been going on around here then you will know that I have been on a bit of a javascript kick for the past few months. Because of this kick I have decided to start writing some lessons for those that are interested in learning javascript.

I plan on posting these lessons not only to http://sumsumsum.com but also to http://codewithdesign.com If you are interested in reading over these articles I will provide the links.

Along with the updates to sum3 I have been writing more articles for code with design.

Day 4 of development results.

The game thus far has gotten a little more complicated. The graphics are less than ideal but I have spoken to a man that knows graphics so hopefully that will get going soon enough. I worked on porting to Android last night and the whole process took about 2 hours which wasn’t bad. (time includes environment set up).

The problems I am currently facing are the following: the canvas on android is slow. I haven’t hit any issues yet and the game is running at 20 frames per second but I feel like this is going to lag with long lasting games so cleanup will need to be done on some of the objects in the game. The second problem is that I am using Cordova (formerly PhoneGap) which is an excellent product but it is not built for game development so there is a lot of un-necessary overhead which makes me want to do it all again in Java.

There is a demo version located here but it doesn’t include a pretty large list of features.

http://atomicbucket.com/games/units/v1/

The linked version is lacking randomly generated map, units unbalanced, specific logic, large list of bug fixes.

 

I will not be working on the game today but there is a very large list of things to do that will make this game a little more unique. One of which is sound…

HTML 5 Engine Update

The other day I started on an HTML5 engine and due to the project being started from a lack of bordom I ended up writing zero documentation, aside from the gravity and collision, which means that this is going to be one of those ‘write once then again’ kind of projects.

The structure of it so far is specific to the player, the characters drawing, there are no proper objects and no proper object handling because of this. Before the project is done I would like to incorporate these things to make the application run better faster smoother etc. As for now I would just like to create the game and make it relatively fun though.

Clouds

I added in a cloud and the cloud kind of moves at the moment. Rather slowly but that’s just because it doesn’t look back around to the other side yet. I would like the could to rain and require the player to have to eat the rain in order to jump, move etc. Once the rain bar is filled then the level is over.

Platforms are going to be in the way of the rain falling and this will allow forcing of the player to jump up onto the platforms to get said water. The trick to the game is going to be a risk vs reward factor which means that the player is going to have to make judgment calls on whether or not the rain drop is worth trying to get to.

 

HTML5 Plat-former Engine Update 1

I have now added in some gravity and velocity to the game. I still need to tweek a few things to make it a little more enjoyable and give it a better transition of movement. At the moment everything tends to happen rather quickly and it looks really blocky and buggy.

At the start of the round the player drops from the top left and lands on the floor. This is the first proof of concept that the dropping of the character is working.

picture!

The next thing on the list is to go through the blocks that the character can land on. This is going to involve creating an array of platforms and checking to see if the character should have landed on it based on where it came from, where the platform is and where it is going.

Yay math! Yay branching statements!