Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 23 2013

06:30

Babylon.GameFX: This Framework Helps You Build HTML5 WebGL Games Faster than Fast


  

David Catuhe has recently released a simple & powerfull WebGL 3D engine named Babylon.JS. Which is a complete JavaScript framework for building 3D games with HTML 5 and WebGL. As this was great in itself, we decided to carry the concept even further and built a framework on top of that. This is our story…

December 20 2012

08:10

The Top Ten Games Apps of 2012

The iPhone App Store hit the internet back in 2008 and in just four years apps have been well and truly accepted into the mainstream. From getting on top of your finances to managing your personal fitness, there’s an app for it. But the most fun aspect of apps is the possibilities they present for the gaming industry. And things have come a long way in just a few years. It’s now possible to get games with console-style graphics quality on the go; video and animation you’d only expect to find in a games arcade. Here are some of the games that have swallowed our spare time in the past twelve months – our top ten games apps of 2012.

Angry Birds Star Wars

Somewhere in a galaxy far, far away, the ultimate games app just got a whole load better. Star Wars Angry Birds isn’t just the best incarnation of the game, it’s also the best movie spin off we’ve seen in a long time. Yup, you still shoot birds at pigs, but in this game you get to do it with lightsabres and lasers. What’s not to love?

Angry-Birds-Star-Wars-Wallpaper-angry-birds-32422194-1920-1200

Fieldrunners 2

The original Fieldrunners was one of the Apple App Store’s first hit games and this version takes to the next level for 2012. It’s a simple premise. Protect your tower and stop the bad guys from getting to the other side of the screen by using a variety of weapons. The more bad guys you kill the more money you get for weapons.

Fieldrunners-2-Title-642x424

Toca Tailor

The first app from Swedish interactive toy maker Toca Boca, Toca Tailor is a cool game for the over fours. This game lets users dress a variety of characters in an almost endless choice of clothes and is a brilliant game for encouraging creativity.

TocaTailor_site_pic

Toca Band

Hailed as one of the best children’s apps of 2012, Toca Band gets kids to create a song through an easy-to-use interface. All they have to do to make their music is drag and drop the colourful characters across the screen – each one has its own unique sound!

toca_band_web_pic

Clash of Clans

Clash of Clans is a cool cross between FarmVille and a war game. Build a village, train your troops and fight with other players. One of the most popular free apps of 2012 on Apple devices.

carousel_clashofclans_01

New Star Soccer

It might not look like much, but New Star Soccer is utterly addictive. Your aim is simple; score as many goals as possible while more obstacles – such as high walls and winds – are put in your way. You need to upgrade from the free version to the 69p incarnation for the real fun though. This version lets you live like a real player, earning wages and building professional relationships with other players and your club manager. Improve your skills and you make more money. You’ll also have to make lifestyle choices to help improve your fitness or, more importantly, attract your very own WAG.

xl_New_Star_Soccer_624

SongPop

SongPop is a free music-trivia app that was named app of the week by ABS News back in July. Guess song clips and challenge your friends – and there are thousands of songs on there, ranging from golden oldies to today’s top tracks.
song-pop-review-ipad-iphone-android-0

Rayman Jungle Run

The legendary console platform hero made a successful jump to mobile this year with Rayman Jungle Run. The graphics are gorgeous and the smooth touch-based controls are a pleasure to use. No wonder it was named the App Store’s Game of the Year 2012; it’s an easy game for all ages to get to grips with, but addictively tricky to master.
Rayman-Jungle-Run-Trailer-Screenshots-570x440

Waking Mars

This app was one of the biggest smashes of 2012. The narrative is one of the most engaging we’ve seen on this platform and involves the discovery of alien life on Mars and the subsequent mission of first contact. It’s an intelligent, adrenalin-fueled race against the clock to determine the fate of a sleeping planet.

waking-mars-developer-trailer_1

Batman: Arkham City

It may only have been launched last week, but Batman: Arkham City is set to be a last-minute big-hitter of 2012. It’s based on the most popular Batman video game on record and sees Batman fight some of the toughest villains ever – including Catwoman. It’s a hefty download, clocking in at 10.67 GB, so make sure your Mac can handle it before you buy.

bgd-batman_arkham_city-400

This is a guest post contributed by Neeru Pallen who writes on behalf of Print Express UK.

Sponsored post
soup-sponsored
20:53

October 05 2010

14:31

Wolfenstein 3D… in 1K of JavaScript

The JS1K conference wrapped up recently. One of the winners that jumped out at me recently was an implementation of Wolfenstein 3D…. in 1K of JavaScript:

The author mentions some of the features:

WOLF1K features a 32×32 map ( a 1024 cells grid ) with textured walls colored by orientation ( North, South, East, West ), fog, 3 transparent bitmap graphics in 8×8, 15 rainbow characters steering smoothly across the map, collision detection, probably the most crazy optimization tricks I ever wrote.

In order to get this into 1K some crazy things had to be done:

WOLF1K works exactly like the original Wolfenstein 3D and Wolf 5k. It is using the raycasting technique. The world is built from a uniform grid of walls and corridors. In order to draw the world, a single ray is traced for every column of screen pixels and a vertical slice of wall texture is selected, scaled and colored according to where in the world the ray hits a wall and how far it travels before doing so.

The sprites and graphics are stored in a small space using a clever trick:

The world of WOLF1K is a regular grid of 32×32 cells. Obviously storing these 1024 cells in one byte or one bit each is not feasible. It would use the 1024 bytes or 128 bytes if stored as bits. It actually is the result of a binary operation applied to the ASCII codes of the source code of WOLF1K plus a mural on each edge of the world.

[via Paul Kinlan]

September 08 2010

21:00

30 Brilliant examples of JavaScript and HTML5 Uses

JavaScript is something I have been planning to start learning properly for the last few months.To really motivate me, I thought it would be a good idea to look into some interesting uses of the language. I thought I’d share these interesting uses with you in this post. Though none of these examples are really JavaScript only, most put HTML and CSS, to be more exact HTML5, and possibly a few different languages and APIs.

Games

JavaScript is proving itself as an extremely powerful language with browser games, developers are able to make games using JavaScript that are on par with flash games.

Quake II GWT Port

HTML5 Chess Game

Akihabara CapMan

Akiba Hero

Minesweeper

User Interface

UI is probably what JavaScript is best known for, whether is adding Animation to a site, or Form Validation

Gmail

Everytime you check your inbox using the refresh button, you’re saving time not needing to fully reload the whole site. This is thanks to AJAX, which JavaScript plays a big part in.

Google Homepage

When Google’s homepage is first loaded, a clean minimalist design is loaded, showing nothing but the Google logo, and the search box. By using JavaScript Google has cleaned up their homepage even more than before. The Gmail links etc are displayed with a movement of the mouse.

Sexy sliding JavaScript side bar menu using mootools

Sliding Boxes and Captions with jQuery

Fancy Thumbnail Hover Effect

Swfir

swfIR (swf Image Replacement) uses a combination of JavaScript and Flash to apply an assortment of visual effects to any or all images on your website.

PlotKit – JavaScript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for JavaScript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page.

Form Validation

Login for Digg.com

Even as I uploaded the above image it was a pop up using JavaScript that the media upload was in! JavaScript was also used to dull away the rest of the Digg site, increasing the focus on the Login box.

Tracking

Google Analytics

Many of us more than likely use Google Analytics to keep tabs on our sites traffic, it uses JavaScript on your site to track your sites performance.

Facebook Social Plugins

Facebook’s new API allows web masters to check if visitors to their sites are logged into Facebook, and if they are to place more emphasis on their Facebook integration.

SocialHistory.js

By using the a:visited css bug in browsers Social History can check if your visitors have been to a certain website, Reddit for example, it can then show a share on Reddit link depending on the result. There is no real need to include 20 different sharing link now!

User Scripts

User scripts are simple JavaScript programmes that can be installed to your browser using an add-on.

For FireFox use:

for Chrome:

Internet Explorer:

Safari:

Minimalist Facebook

Removes the righthand side sidebar on Facebook, really de-cluttering the site.

Google Calendar Dynamic Icon

Changes the favicon on Google calendar to display the days date

Keep Tube: Download Youtube Videos (HD 1080p & 720p)

Adds the ability to download YouTube videos directly on YouTube.

Gmail Favicon Alerts 3

Changes Gmails favicon to alert you of new mail

@troynt’s Twitter Script

Firefox add ons

Better Gmail 2

Bookmarklets

Bookmarklets are tiny JavaScript programmes that are contained in a bookmark in your browser. They’re javascript: urls which you can drag to your bookmark toolbar, just like a normal bookmark. Though so small, and easy to install (you only need to drag them to your toolbar to install them)

Quix by Yoast

An introduction to Quix from Joost de Valk on Vimeo.

Spriteme

Sites that include several images in the design should consider using css sprites. Making sprites manually can be time-consuming, sprite me is an extremely useful bookmarklet that will add all selected images on any given site, and generate the required sprite and css.

After the deadline

Can add the after the deadline spell check to any page online, with just one click!

Evernote Web Clipper

This bookmarklet is extremely useful, and makes Evernote even quicker and easier to use.

Rollyo RollBar

With one click it adds a search box for any site, handy when you’re looking for a post on a site that you just cant seem to find again.

Readability

Readability is a great service that removes all the clutter for a website, leaving the article formatted in such a way that its allot easier to read.

As you can see the uses for JavaScript can greatly vary. Adding JavaScript to your list of known languages could greatly improve the quality and functionality of any site you work on. Something I am now learning myself after seeing these different examples.

August 27 2010

10:00

It’s Gmail: The Game!

TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:

When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but fun.

Read more on the Gmail Blog.

Play the game yourself (note that you must be using a modern browser)!

[via Bryan Neuberg]

July 27 2010

00:21

Canvas Color Cycling

Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects.

Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.

There’s a neat optimization going on here too: instead of clearing and redrawing the entire scene with each frame, he only updates the pixels that change:

In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!

June 16 2010

08:23

Guess the color. Hex geekery.

How hex geeky do you feel today? Take a sec to guess the hex!

June 15 2010

12:28

Suburban World; The fantastic HTML5 Aves gaming engine is back

Do you remember being really impressed by the initial Aves game engine that uses Canvas and HTML5 technology to deliver a compelling social gaming platform on Web technology? Well, now the Dextrose crew are back in action having released their second prototype of their upcoming browser-game middleware at E3 2010 in Los Angeles:

The new prototype is shown live to interested licensees and magazine editors on the exhibition floor. Additionally, a video with six minutes of in-game footage has been released on YouTube. Compared to the medieval-styled prototype from some weeks ago, Dextrose introduces even more innovation and performance boosts not yet seen in the browsergames industry.

  • unbelievable performance in the browser: Aves Engine renders hundreds of players in realtime in one viewport
  • introduces innovative Action Surface-Technology which allows the integration of any Web 2.0 or custom widget into your game
  • high-scalable viewports to any screen resolution size with nearly no performance impact
  • very large optimizations towards the mobile market. Technical stunning games now possible on WebKit-based Smartphones and iPad
  • a refurbished and extended realtime world editor
  • sprite animation classes

I had a chance to play with the prototype, and man was it nice. The iPad is fairly underpowered when it comes to intensive tasks like this, and it works very well indeed. The team had to spend a lot of time optimizing the engine for that form factor, and they are now in good steed for other mobile devices.

Moving around the world with iPad and laptops alike showed how well the UI keeps up with goings-on. This is because good old Mr. NodeJS is behind the scenes scaling up nicely for the crew. The multiplayer engine is smart enough to gracefully failback from WebSockets to long polling to standard boring polling that the iPad requires. All seamless to the programmer. The developer just gets to riff on top of the simple to hack on game engine.

Since the engine is built on the Web, the team could create Web surfaces with ease. This enables you to create mashups of content to embed directly into the game. Walk up to a laptop monitor in the game and see that it has a real browser window embedded and play with it. The world is truly your oyster with this engine.

If you are interested in building up a large player world, and want to get across a myriad of devices thanks to the Web platform, look this up to give it a roll.

Great work guys!

May 19 2010

05:01

Golingo: a great Titanium mobile Web game, open sourced for you

Jacob Waller created an addictive word came in Golingo. What sets it apart?

  • Not a single line of Objective-C written, courtesy of Titanium Mobile
  • Only one (!) image ingame – the rest is CSS3 magic
  • Fluid gameplay thanks to CSS Transitions and Animations
  • All logic using pure, beautiful JavaScript
  • Multitouch draggables using iPhone Touch API
  • Logic encapsulated using Low Pro – meaning split screen mode was easy pie
  • jQuery 1.4.2 for development speed (and sanity of developer)
  • CouchDB as highscore storage, with storage logic in JavaScript
  • Predictable randomness means replayable games, all courtesy of excellent seedrandom

Jacob dives into deeper into the full tool chain that he used in his post about open sourcing the code behind the game. That’s right, he wants you to fork it and do something amazing with the game. Pretty awesome if you ask me.

His tool chain:

He then goes on to talk about the initial construction of the game:

Most of the actual game was made in a few weeks time, but from scratch to published app it took almost six weeks of part time work. A lot of this time was spent banging my head into various walls. Again, Titanium is great, but it’s a young framework with all the kinks that follows. There has been quite a few bugs, and the documentation hasn’t always been up to date – but this is much better nowadays. What more – since most other developers are as clueless as yourself, It’s been hard finding good resources and getting help. I did however get a trial for Appcelerator’s Premium Subscription, with 48-hours guaranteed response, and I must say it’s really good stuff. The developers themselves answers all your stupid questions and relieves most of the wall banging. If you can afford it, go for it!

By releasing the code for Golingo, we hope to relieve some of the headaches surrounding developing packaged HTML5 apps. I do not say that it’s not full of faults, because it is, but at least it is a working example full of faults. Please don’t hesitate to dig through the code to see what is going on. We believe we’ve solved some common problems that you too will run in to when using Titanium, for example transparently calling native functions from a webview (and vice versa) using callbacks and trickery. Here’s a quick recap of that:

  • Connecting Titanium Contexts
  • Low Pro like a low pro: $(‘<div/>’).attachAndReturn(Letter, this, letter, specialLetter);
  • Sexifying: including templating with mustasche

Thanks for the great info and resource Jacob!

May 14 2010

04:21

Slither

Slither is a Web port of the age old Snake game.

Erik Johnson wrote the game, and had this to say about the project (available here on GitHub):

We’ve seen a million varieties of snake/nibbles games over the years, especially in Flash; however, I haven’t come across many that are implemented using Canvas. I’ve used it to simply draw the game area and used standard CSS2 and jQuery animation techniques to provide the rest of the UX support. The game itself uses an interesting combination of class-based components that allow for rich support of extensibility and ease of maintenance. The performance has proven quite well on all the current A-grade browsers (except IE of course :P)

April 30 2010

11:20

Torus: 3D Tetris Fun

Nearly 4 years ago, Ben Joffe created a fun Tetris-like game called Torus that takes the classic and makes it cylindrical. He just updated the game now that browsers can power his canvas game sooo much better.

  • Smooth falling motion
  • Smooth left/right motion
  • Row clear animation
  • Slightly higher playing field
  • Visual indication of death zone
  • “Sparkling” blocks
  • New points system
  • New piece types (you’ll have to wait a while to see these appear).

Nice work Ben!

April 22 2010

11:40

HTML5 is my Arcade. Akihabara.

Akihabara is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript. What does it consist of?

Akihabara is composed of a number of libraries that use HTML5 canvas tag and some standard hooks.

Gamebox module is complete and compact enough for making games: it allows multiple grouped objects moving simultaneously, it helps with collisions, rendering and moving objects. It provides monospaced pixel-fonts rendering too. It handles keyboard, double buffering and evenutally FSEs. For now do not support audio via the HTML5 audio tag but only because I don't any skill on music/SFX for adding audio to the shipped demos :). I'm going to add this kinda soon.

Gamecycle module provides a complete generic game cycle: intro, menus, crossfading between stages/lifes, gameover and ending. You can use the same game cycle for many games and implement only the main game.

Toys module provides lots lots of common routines during the game developing: from effects for screen titles to HUD handling to platform/SHMUP/RPG oriented routines, like jumping characters, Z-Indexed objects, bullets, sparks, staff rolls, bonus screens, dialogues etc.

Help module provides some Javascript-specific functions, such object copying, randomizing functions, string/array handlers and the akihabaraInit function, that automatically sets a comfortable preset of configurations: 25fps, double-sized display for non-mobile devices, dynamic frameskip.

Tool module provides simple developing tools. Actually there is only a cel-composer: it can compose an image stacking a set of frames for animating objects, applying a number of filters to each frame.

Trigo module provides some math stuff for moving objects toward a direction or following a round path.

Iphopad module provides a touchpad for touch-based device (for now, Android and iDevices).

When you are debugging a game you can simply add some parameters to give you great new info (debug bars, double buffering, touch UI events, set FPS, and much more).

View source on the games to see state machines and info such as:

JAVASCRIPT:
  1.  
  2. kill: function(by) {
  3.   this.frame=8;
  4.   this.accz=-8;
  5.   maingame.addSmoke(this,"flame-red");
  6.   this.killed=true;
  7.   maingame.playerDied({wait:50});                                   
  8. }
  9.  

Awesome work Francesco.

March 02 2010

21:54

Bank Run, an iPhone Game With Real Video Footage


Bank Run Trailer: Watch. Interact. Play.

Bank Run is an interesting game for the iPhone, produced by SilkTricky, that uses high-quality real video footage to immerse the user into a fun game experience which includes a side-scrolling shooter and a third-person shooter.
In this game, players take the role of Evan Sharpe, a young financial analyst that have to save itself and his girlfriend from a deadly conspiracy. The first part of Bank Run, which you can play online, is an interactive movie where player’s choices influence the course of events and it’s characterized by a series of simple challenges in order to escape from your office and survive. The second part, you can play on your iPhone, is instead a typical shooter game. The game costs $1.99 and you can buy it on the iTunes store.

February 08 2010

12:04

Pseudo 3D tricks from old computer games for all your Canvas needs

It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to dig into the tricks arsenal of old-school game development on machines full of win like the Commodore 64 or Amiga.

Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.

He is also working on some demo code which you can help him with by providing some JS/Canvas demos:

Fake 3D

CODE:
  1. current_x = 160 // Half of a 320 width screen
  2. dx = 0 // Curve amount, constant per segment
  3. ddx = 0 // Curve amount, changes per line
  4.  
  5. for each line of the screen from the bottom to the top:
  6.   if line of screen's Z Map position is below segment.position:
  7.     dx = bottom_segment.dx
  8.   else if line of screen's Z Map position is above segment.position:
  9.     dx = segment.dx
  10.   end if
  11.   ddx += dx
  12.   current_x += ddx
  13.   this_line.x = current_x
  14. end for
  15.  
  16. // Move segments
  17. segment_y += constant * speed // Constant makes sure the segment doesn't move too fast
  18. if segment.position <0 // 0 is nearest
  19.   bottom_segment = segment
  20.   segment.position = zmap.length - 1 // Send segment position to farthest distance
  21.   segment.dx = GetNextDxFromTrack() // Fetch next curve amount from track data
  22. end if

January 05 2010

11:06

Commodore 64 JavaScript Emulator

c64

Tim de Koning has done what folks do best with their winter holidays…. created something fun :)

With JSC64 he has ported the Flash version to give us an emulator for the Commodore 64 in JavaScript.

Tim’s work uses Canvas and he provides a jQuery plugin if you are that way inclined. It is fun to check out the source on GitHub.

December 07 2009

13:45

JavaScript Gaining Traction with Game Developers

We received an email from Joesph Huckaby about his new JS-based game rendering engine and I have to admit that when I first read about it, I was a little skeptical about it mainly because I’ve been disappointed with many that I’ve seen in the past. As I dug into his site, Effectgames.com, my whole opinion changed as I saw some very robust demos that clearly demonstrated the capabilities of this engine.

effectgames

The games are powered by the “Effect Engine”, Joseph’s JavaScript/DHTML library that provides the framework for displaying and animating all the graphics, playing all the sounds & music, handling the keyboard & mouse, and sprite collision detection. It can smoothly render multiple layers of parallax scrolling tiles and sprites using pure DHTML. HTML 5 Audio is used where supported (currently Safari on Mac OS X 10.5 only, 10.6 and Firefox coming soon), and 3rd party extensions used elsewhere. All modern browsers and platforms are supported, including IE 6+, Firefox 3+, Safari 3+, Chrome 1+, and Opera 9+.

The team has also created a suite of online tools to allow developers to prepare and design their game online including managing graphics & audio, creating levels for their games and manipulating graphics in real-time using non-destructive filters (scaling, rotation, and a number of other transforms).

Developers can build their games locally on their Macs or PCs, and don’t have to upload any code until they are ready to publish. Once ready, developers can compile their code automatically using Google Closure, and receive a unique URL and embed code to share the game on their own site, blog, or anywhere they want.

In looking through the documentation, it looks like the whole API is very well laid out clearly documenting the breadth of methods available and the Getting Started guide is very comprehensive.

I didn’t find anything that discussed licensing or a potential pricing model so that’s something that you may want to look into before diving into this but from what I’ve seen, the engine looks very promising.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...