Tag Archives: Devices

Nokia unveils Lumia 920 and Lumia 820

Nokia unveiled their new phones today in one of the awaited Nokia announcements of the year. These were the Nokia Lumia 920 and the Nokia Lumia 820 based on the Windows Phone 8 OS.

Nokia defines the Lumia 920 to be the “World’s Most Innovative Smartphone” with it’s 4.5 inch screen with an LCD display, Snapdragon S4 dual-core 1.5 Ghz processor, 2000 mAh battery, integrated NFC, Puremotion HD+, and the PureView camera with a Carl Zeiss lens. What also seemed attractive was a demonstration of their super sensitive touch technology that made a touch on the phone screen in any form be it with gloves or with bare hands very easy and intuitive.

A big thumbs up to the built-in Wireless Charging in the Lumia 920 which makes it easy to charge the phone using the Nokia Wireless Charging Plates, the Fatboy Pillow and even the JBL Power Up Speaker. They announced partnerships with Virgin Atlantic and Coffee Bean and Tea Leaf outlets to implement these wireless charging plates.

Another technology that powers the Nokia Lumia 920 is the PureView imaging technology that uses the optical image stabilization system which holds the camera still even if the hands are a little shaky giving more stable and less blurry videos and photos.

Speaking about the app market, the event had demos of apps including the City Lens demonstration of the Location Suite, Nokia Music, Angry Birds Roost and the Cinemagraph. It was said that the Windows Phone marketplace has grown from 7K apps to 100K and most of the demoed apps would be made available with the existing devices.

Nokia has a lot riding with this launch. It was an anticipated announcement because Nokia has been in the news for all the wrong reasons and they really needed something impactful in their announcement to get back into the game with their competitors. With the announcement today, the strongest has been their imaging technology with PureView and their wireless charging. The release dates for these devices are not out yet so we have to wait to try the devices and everything shown today.

Mariam

 

HTML5 Game with EaselJS and TweenJS

HTML5 has been a subject of interest and discussion for many developers. I was intrigued by the platform myself and decided to explore it with a simple game of Concentration to understand how easy or difficult it is to plan a project that requires these new web standards. I used the Canvas element with the EaselJS Library and the TweenJS Library for development.

http://mariamdholkawala.com/games/concentration/gameconc.html

Working with the Canvas
When developing games with HTML5, one of the most crucial elements is the Canvas. The Canvas is like a blank slate on which graphics can be drawn using Javascript. The Canvas element is always added to the HTML page with an id reference for use in Javascript. However a canvas can also be created dynamically using JQuery.

Once the canvas is ready for use, we can combine it with libraries such as EaselJS to draw graphics or text. EaselJS has object properties very similar to Actionscript thus offering a more familiar ground to Flash developers.

HTML (set the Canvas):
<canvas id="myCanvas" width="550" height="400"></canvas>

Javascript (loading an image on the Canvas):
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img=new Image();
img.src="graphics/title.png";
img.onload = function(){
ctx.drawImage(img,0,0);
}

Javascript (using EaselJS to load image on Canvas):
var canvas = document.getElementById("myCanvas");
var stage = new Stage(canvas);
var img=new Image();
img.src="graphics/title.png";
img.onload = function(e){
var title = new Bitmap(e.target);
stage.addChild(title);
stage.update();
}

<div> tag verses <img> tag verses Canvas
There was a constant decision to be made on what is the best approach for loading graphics. The choice was mostly between the <div> tag, the <img> tag and the HTML5 Image element. I personally observed that all seem efficient to use, but preferred using the HTML5 Image element for in-game graphics because they could be manipulated dynamically much easily. The <div> and <img> tags seemed suitable for the static background and other UI elements which needed design effects with CSS.

HTML (adding a div tag and loading image in the div using CSS):

<div id = "btn"></div>
<canvas id="myCanvas" width="550" height="400"></canvas>

<style>
#btn{
background:url('graphics/playbtn.jpg') no-repeat center;
}
</style>

Mouse Events
Mouse Events and Touch Events are necessary to make any game interactive. With HTML5 too, they can be applied to individual graphical elements or to the complete canvas. Some of the useful events for games are onLoad, onMouseOver, onMouseOut, onClick.

In the Concentration game, I used click events for independent HTML5 elements like button images. I also applied a click event to the complete in-game canvas. This is because, during the game-play, the card placement changes with every level. Each card has a property which is best identified by comparing the mouseclick X and Y properties with the card’s X & Y properties.

Javascript (adding a Click Event to the whole canvas):
canvas.addEventListener("mouseup", mouseUp, false);
or
canvas.onclick = mouseUp;

Javascript (adding a Click event to a graphic using EaselJS):
image.onClick = mouseUp;

Javascript (mouseUp event)
function mouseUp(e){
var mx;
var my;
if(e.layerX >= 0 || e.layerY >= 0){
mx = e.layerX;
my = e.layerY;
}else if(e.offsetX >= 0 || e.offsetY >= 0){
mx = e.offsetX;
my = e.offsetY;
}

for(i = 0; i<deck.length; i++){
var card = deck[i];
if((mx > card.xpos && mx < card.xpos + cardWidth) && (my > card.ypos && my < card.ypos + cardHeight)){
//card clicked
}}}

Working with Different Screen Sizes
Supporting different browsers and devices is touted as one of the biggest plus points of HTML5. This means we should be able to customize our content to detect different screens and render the code accordingly. However this is not as easy as it seems, especially for games. There are several challenges in supporting the game on different browsers and device screens.

I remember reading an article on Adobe Developer Connection on working with HTML5 and CSS3 with Dreamweaver but it seemed more apt for app development not suiting my purpose of fluid dynamic screens for games. I did some testing with my game code and managed to achieve a common graphic database for some in-game elements. The current game that I developed, detects the browser and resizes in-game graphics after identifying the device (although there is scope for improvement).

Using TweenJS for transitions and animations
Very good transitions and animations are easily achievable using CSS3, but the TweenJS library makes it much easier to work with animations, especially if you have used the EaselJS Library for the rest of the game. I have used the fade-in fade-out transition for the cards in the Concentration game.

The code below simply fades an image to 0 alpha within 400 milliseconds without a loop. The detailed use of the TweenJS library can be found online.

Tween.get(imageToTween,{loop:false}) .to({alpha:0},400,Ease.get(1))

There are many resources available to understand game development with HTML5. I found the development interesting and hope to discover better development techniques as I work with this code. For seasoned Flash game developers, it may feel like a little let down, but giving in to the HTML5 hype can keep the motivation up.

http://mariamdholkawala.com/games/concentration/gameconc.html

This game should load in all browsers supporting HTML5 (IE gives weird results, not tested on Safari). The game should also run on device browsers but may not give a great experience because it is not ready for devices.

I’ll share the code when it is ready.

UPDATE: The game source files can be downloaded from ConcentrationGame.zip (1.24MB)

Mariam

Reasons not to play a game on mobiles

I was looking at my devices today and tried understanding my game playing behaviour.

Out of the devices I use, my iOS device has more games than any other device. Next comes the Android and Symbian devices where I have some games installed, but have never played them (don’t know why!!). Out of all the current 100 iOS games, I only play around 4-5 very regularly and another 4-5 occasianally.

So what is it that gets me to download a game but not play it? I thought through some of the points and this is what I think.

1. Creative Inspiration – So we’ve played Fruit Ninja, Angry Birds and Cut the Rope on the iOS platform. Now, do we really need a game with the mechanics of Fruit Ninja, bird characters from Angry Birds and a name inspired by Cut the Rope?.
If you’ve played “Cut the Birds” and you’ll know what I am talking about (the game is now taken off the App store and has another version Cut the Birds 2). One of the primary resons why games fail to connect with users is that they lack originality and just end up being poor imitations of successful IPs.

2. Herd Mentality – Farmville created history with online social gaming, but then more games decided to follow suit with farm themes or similar “Click and Collect” mechanics. And were they successful? Probably yes, but for how long is the real question! I don’t remember the last time I played a Facebook connected game because of the “Follow the Herd” mentality used while writing concepts.

3. Game Tutor – As a casual game player, I really don’t like a casual game constantly throwing pop ups at me to teach me how to play the game. It breaks the flow and can be very obtrusive. I think a casual game should be self explanatory or atleast with minimum non-obtrusive teaching.
Help pop-ups may sometimes be necessary for games, especially strategy and time management games, which are competitive and require a learning curve to progress, so I’m not completely averse to them.

4. Forgotten Icon – Many times when I reach out for my device to play a game, I notice installed forgotten apps. And then when I recall them after looking at them, I wonder if it makes sense to ever play them again.
Forgetting to play an installed app is nothing but a result of an average game-play, designed to be non intuitive, and not great enough to get us engaged after the first couple of minutes initial play.
Prototyping and testing an idea with people trusted for feedback is the best way forward. Being open to criticisms is only getting better at designing and developing a better game.

5. User Experience – I was playing a turn based game against the computer AI recently. I won’t name the game, but the mechanics were as simple as Tic Tac Toe. However, everytime I was to play a turn or the AI was to play a turn, I would have a big popup message thrown in front of me informing me that it was my turn or the computer’s turn to play.
This is an example of a terrible User Experience design because it ends up irritating me/the player with constant reminders during every turn. A definate reason for me not to replay the game.

6. Buggy Pop-ups – What happens when I am playing a game (Chess for example), and I play my turn before the game can alert me of my turn. Now the game logic gets stuck at this point where it has my turn pop-up to display on screen but knows in the background that it is the AI who will play next. My game hangs at this point and I’m stuck staring at a game screen where I can’t progress. I have to shut down the game and restart it.
Will i play this game again? Only if it has an addictive game-play and value for time.

7. Noisy Screechy SFX – One usually plays a game when they want to take a short break in-between or after work or sometimes as a part of their learning process. Poor sound effects or background music really make me shut down the game even if I really need to play it.

8. Where’s the Entertainment – Some games just lack entertainment. And I can’t define this any further. Game development is a coordinated process and going wrong in any of the phases can lead to a non entertaining game.

9. Non accessibility of content – Today most games are sold through mobile app markets. iTunes gives the easiest access to download games irrespective of the iTunes version or the device OS. Similarly Android too offers ease of use of the Android Marketplace. For the others, it’s not been very easy at all times.

Mariam

PhoneGap Framework for Mobiles

I recently spent some time studying the PhoneGap framework with the purpose of creating content for Android devices. PhoneGap is an Open Source Mobile Framework that allows developers to author native applications with web technologies such as HTML, JavaScript and CSS. PhoneGap currently supports 6 platforms including Android, iOS, Blackberry, Palm WebOS and Symbian WRT (including QT).

Working with the framework made me realize how easy it is for any web developer to target multiple mobile platforms without having to write the native code, and yet achieve cross platform compatibility with the same content.

In other words, the content layouting is flexible and can run across different screen sizes and platforms without having to change the any part of the core code.

The framework usage is very simple and well explained on the website. Once you are setup with the framework within your preferred development environment, the only effort goes in writing your HTML files and compiling the builds with the HTML assets to test on the actual device. PhoneGap also has its own API functions which makes use of features such as Network, Accelerometer, use of Camera, Events, Data Storage etc.

Performance wise, it is good, but animating too many objects around the screen drops the framerate. I tried running a game and got a FPS of around 7-8 on older Android devices and around 12 on the newer ones such as the Nexus One.

Perhaps the biggest challenge was integrating jquery for database interaction, where network calls constantly failed. It was later understood that PhoneGap takes a little time to load, so if the device is not ready and the API calls to the network are made, then the network calls fail.

 

From the code above it is noticed that in order to use PhoneGap we have to load the phonegap.js script into the HTML file. This is one of the 2 code bases required for calling any PhoneGap functions (the other code base is native and is compiled when building the device build).

When the HTML loads, the first function called is the onLoad() function which checks whether PhoneGap is fully loaded. This check is done using the onDeviceReady event.

When the device is ready, an onDeviceReady event is fired. The next step is to check for network. This too is done using the PhoneGap functions – NetworkStatus. If the network exists, then the network related calls using jquery are used, otherwise an alert is sent to the user informing of no network.

I’ll soon be uploading a PhoneGap Android app, and will share the link for downloading when ready.

Mariam

 

Designing for Mobile in India?

If your answer to the question above is in affirmative, then Mobile Design India should be the forum for you!

Mobile Design IN, Indian counterpart to Mobile Design UK, aspires to bring together creative designers from across India on a single platform to discuss mobile designing, technology, news and encourage sharing of knowledge and ideas.

This group is co-founded by Priya Prakash from Nokia, and she is planning the group’s first event in Bangalore on the 29th of April 2010. The event will focus on 4 companies/startups that are crafting mobile user experiences thus taking advantage of the Indian market mobile opportunity and challenges.

You can read about the event on the group blog – http://mobiledesignin.tumblr.com/
Also follow the Mobile Design IN yahoo group.

I’m hoping the group would have meetings in different cities of India so designers from across the country can make the most of the benefits the group has to offer.

Mariam

Device Central CS4 Device Profile Update 5 Available

(via Mark) Device Profile Update 5 for Device Central CS4 is now available for download. This new update contains 36 new and some updated profiles bringing the total number of supported devices to 738.

Some of the profiles include Nokia 5530 XpressMusic, Nokia 5630 XpressMusic, Nokia 5800 XpressMusic Flash Lite 3.1 (great as I need to use it!), Nokia E52, Nokia N86 8MP, Nokia N97 and the HTC Hero for testing flash in the browser.

All new device profiles would be available through the Online Device Library in Adobe Device Central CS4. Check the complete device here.

Mariam

Flash Lite Services API articles for the Nokia S60 5th Edition devices

Via biskero, the Forum Nokia Flash Lite Wiki has a new list of articles explaining the working of the Flash Lite Services API (via code examples) for the Nokia S60 5th Edition devices. The list of articles include –

CS001257 – Listing installed applications in Flash Lite

CS001256 – Launching an installed application in Flash Lite
CS001255 – Controlling vibra settings in Flash Lite
CS001253 – Displaying sensor data in Flash Lite
CS001252 – Listing messages in Flash Lite
CS001251 – Deleting a message in Flash Lite
CS001250 – Listening for incoming messages in Flash Lite
CS001249 – Sending an SMS in Flash Lite
CS001221 – Importing contacts in Flash Lite
CS001224 – Listing media files in Flash Lite
CS001225 – Organising contacts in Flash Lite
CS001223 – Listing contacts in Flash Lite
CS001222 – Listing calendar entries in Flash Lite
CS001220 – Importing calendar entries in Flash Lite
CS001219 – Exporting a contact in Flash Lite
CS001218 – Exporting calendar entries to a text file in Flash Lite
CS001217 – Deleting a contact entry in Flash Lite
CS001216 – Deleting a calendar entry in Flash Lite
CS001214 – Adding a calendar entry in Flash Lite

Mariam

Device Central CS3 Update 7 for download

Via Mark Doherty, the latest Device Central Update for CS3 is now available for download. This seventh (#7) update contains 57 new profiles and updates to 204 existing profiles, taking the total number of device profiles to 525.

This update is supposed to be the largest profile update ever and can be accessed from this link

Cheers to the Device Central team once again!

Mariam