WebAppers

/ best free open source web resources /

Graphic Resources

Building Instagram-like Photo Sharing App with HTML5

Posted · Category: Information

When I started out on this app I was only really just interested in seeing if the web platform had really evolved to a point where an app like the hugely popular Instagram app could be built using just HTML, JavaScript and CSS. As it turns out we can in fact do exactly that. This article walks you through the technologies that make this possible and shows how it is entirely feasible today to build interoperable web applications that provide a great user experience no matter what brand of browser the user is running.

If you happen to be one of the two or so people who have not heard about Instagram then you might be pleased to hear that it is a hugely popular photo sharing and social networking service that allows you to take pictures, apply interesting digital filters on them and share them with the world to see. The service got so popular that it was acquired by Facebook for a bag full of cash and stock in April of 2012.

InstaFuzz is the name of the app I put together and while I don’t expect to be acquired by Facebook or anybody else for a billion green it does however make the case that an app such as this one can be built using only standards compliant web technologies such as Canvas, File API, Drag/Drop, Web Workers, ES5 and CSS3 andstill manage to runwell on modern browsers such as Internet Explorer 10,Google Chrome and Firefox. And you could easily use the code to build a Windows Store app too.

About the app

If you’d like to take a look at the app, then here’s where it is hosted at:

http://blogorama.nerdworks.in/arbit/InstaFuzz/

As soon as you load it up, you’re presented with a screen that looks like this:

The idea is that you can load up a photograph into the app either by clicking on the big red “Add” button on the bottom left hand corner or drag and drop an image file into the blackish/blue area on the right. Once you do that you get something that looks like this: Read the rest of this entry »

How to Use Web Workers for Image Manipulation

Posted · Category: Information

Today I’d like to talk about picture manipulation in HTML5, using pure Javascript.

The Test Case

The test application is simple. On the left a picture to manipulate and on the right the updated result (a sepia tone effect is applied):

Picture before and after Javascript manipulation

The page itself is simple and is described as follow:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>PictureWorker</title>

    <link href="default.css" rel="stylesheet" />
</head>
<body id="root">
    <div id="sourceDiv">
        <img id="source" src="mop.jpg" />
    </div>
    <div id="targetDiv">
        <canvas id="target"></canvas>
    </div>
    <div id="log"></div>
</body>
</html>

The overall process to apply a sepia tone effect requires you to compute a new RGB value for every pixel of the existing source picture, and then render it on the <canvas> tag with id=”target”. Below are the formulae we use to create the new RGB values from the existing RGB values of a pixel:

finalRed= (red * 0.393) + (green * 0.769) + (blue * 0.189);
finalGreen = (red * 0.349) + (green * 0.686) + (blue * 0.168);
finalBlue= (red * 0.272) + (green * 0.534) + (blue * 0.131);

To make it a bit more realistic, I’ve added a bit of randomness to my sepia formulae. I create a noise value which ranges from 0.5 to 1, which determines the degree to which my final pixel output matches the RGB value calculated via the formulae above, versus the degree to which it retains it’s original RGB values.

Read the rest of this entry »

Taming the Scalable Vector Graphics (SVG) Beast

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

With the large number of varying screen resolutions available on today’s HTML5 gaming
devices, it is now advisable to give some consideration to incorporating vector graphics into your games.

SVG, or Scalable Vector Graphics, is an open standard, XML-based format developed by the W3C for representing vector graphics. Using SVG files for HTML5 game development is the main focus of this article.

Vector Graphics

Adobe Flash developers have long enjoyed the ease with which they can create attractive and, somewhat more importantly for browser-based games, scalable vector graphics.

Advantages of employing vector graphics for HTML5 game development include:

  • Scalability without loss of clarity
  • Manipulation of individual components
  • Client-side, rather than server-side, processing
  • Potential for animation and, almost certainly, interaction.

Let us address each in turn, using the following SVG file created using an
open source vector graphics editor.

SVG beast

Scalability

The capability to scale vector graphics without losing image quality is the primary benefit of using SVG files. Given the varying screen resolutions of the devices on which people are today playing HTML5 games, SVG files provide the most pleasing result when scaled.

Let’s use our beast SVG file to demonstrate.

zoomed in on vector
zoomed in as image

The image on the left is the result of scaling the vector graphics version of our beast. Lines remain clean and clarity is retained.

In the the image on the right, the result of scaling the bitmapped version of the same region of our beast produces a rendered result with considerably less definition. Edges of primitives are noticeably pixelated.

Read the rest of this entry »

Progressive Enhancement for Browser-based Games

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

Browser-based games are uniquely positioned at the intersection of the web and games, inheriting all the capabilities and resources of the web and browser technology. However they also face many of the same problems associated with developing for the web, while still retaining the intrinsic challenges of game development. One fundamental challenge of web development is providing access to the diversity of devices accessing the web, allowing users to interact with content regardless of platform or connectivity. One strategy for working with such diversity — progressive enhancement — is of significant benefit to browser-based game developers, and can help realize the full potential of games on the web.

Progressive Enhancement

Progressive enhancement is a web development strategy whose basic principle is to begin with the simplest representation of content, adding complexity as required, up to the limitations of the means of access. Its goal is to always provide content regardless of the capabilities of the device used to access that content. In practice, this means starting with pure content (text, images, etc.) and adding features to enhance the representation of the content (fonts, colors, etc.) toward aesthetic and utilitarian goals without creating dependencies on those features.

progressive-enhancement

As more people use mobile devices for web browsing, web developers have adopted a “mobile first” approach, taking into account the reduced technical capabilities of mobile browsers and networks, simplifying the display of content to maximize performance and accessibility. By applying this same approach, browser-based game developers can create games playable on a wide spectrum of mobile devices operating on unreliable networks, while allowing for increased capabilites and advanced features on other devices. Simply put, using progressive enhancement in browser-based games can allow more players to play more often.

Read the rest of this entry »

Deal of the Week: Spy on Your Competitors

Posted · Category: Information

Keeping up with the latest and greatest Web features is an exhausting experience, though. You can check out tons of forums, blogs, newsletters and more just to read up on the latest releases. The best way, though? Just browse. Check out what your competition’s doing. If only it were that easy to look beneath the hood. Well, it is. Thanks to SpyBar, you can pull in tons of useful data about any site, and you can do it all right from your Firefox or Chrome browser.

With just a single click, SpyBar will instantly spit out a list of WordPress themes and Plugins used on whatever website you’re currently on. So surf over to your competition’s site or some of the industry leaders’ pages, and take a peek at what’s working for them. SpyBar normally sells for just $12.95, but for a limited time only, you can purchase this incredible browser extension for only $7! That’s nearly 50% off the original price.

spybar

How to Create Realtime Multi-player Games in HTML5

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

Multiplayer and browsers

When you consider making multiplayer games, there are many methods available for creating a game that friends can play online. There is a good variety of multiplayer game types – take for example a card game you play synchronously with friends. Turns are made, information is exchanged in (semi) real time and the game progresses in discrete steps. Another example, Chess, can be asynchronous. Players take their time, contemplating possible actions and play their next move one week from now. These types of multiplayer games exist in browsers, and have for a long time. The nature of the browser itself makes it easy to make semi real time games, but we want more-visceral real time action.

Card games and Chess both usually require communication with a server and communication with the other players in order to work online. This is the foundation of a multiplayer experience to be possible – and for a long time this has existed via HTTP, where POST and GET have always been used to manage games.

The trouble with these methods is the delay, posting a message and waiting for a response each time is just too slow. It works for the semi real time and asynchronous games, but real time games require messages sent and received sometimes in the region of 33~66 times per second, something that is not quite possible with HTTP alone.

Luckily, in modern browsers we can take one step higher, and have a real time connection between a server and clients. The purpose of this discussion is to present one overview of how multiplayer games are made. We will look at input prediction, lag compensation, client interpolation and more importantly – how to do this in your normal browser using websockets. The article will present a playable demo with parameters to play with, showcasing the concepts discussed.

The technologies that we have chosen and why

Socket.io

socket.io is a powerful and flexible server-side and client-side component that enables real time networking in your browser. Not only does it support newer technologies like web sockets, but it also falls back safely onto a Flash networking layer, XHR or JSON long polling and even an HTML file transport layer. Most appealing about it perhaps is the simplicity and inherently asynchronous nature it brings, which is extremely useful when writing server and client code.

Another benefit of using socket.io is the fact that it ties into Node.js seamlessly. When coupled with Express, on connection, it can serve the client-side includes, game files, and data, making the integration clean and easy. Once you set it up, the amount of code between first connection and communication with a client is nothing short of amazing. And it would work in all browsers, mobile included.

Read the rest of this entry »

Protect Yourself from Copyright Infringement Claims

Posted · Category: Information

Copyright regulations exist to ensure that the owners of intellectual property, such as images, text and other creative works, are protected should their work be used without their permission.

The Copyright, Designs & Patents Act 1988 gives the creators of literary, dramatic, musical, artistic works, sound recordings, broadcasts, films and typographical arrangement of published editions, the right to control the ways in which their content may be used.

Although it’s designed to protect content producers against malicious use, creative professionals such as web designers need to be careful not to breach copyright.

What does the act include?

Written content and articles

Copying articles or content from third parties can constitute a copyright breach, even if the content is modified or adapted. The use of scrapers could also be constituted as a breach, as can placement of ‘dummy text’ that is used on another website, even if it is only used on a development server.

Photography and graphics

Photography and images are one of the most common areas of copyright infringement for web designers. The copyright for any image usually lies with the photographer or website that you purchased the image from. If you use stock images from sites such as iStockphoto, ensure that the licence you purchase on behalf of your client is the correct one. It can be all to easy to purchase a ‘Standard’ licence, when in fact extended rights are needed – so be sure to read up on the licence agreement before you make the purchase. Read the rest of this entry »

How to Create High-Performance Code

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

16 milliseconds is not a lot of time. Try eating a hotdog that fast – though I swear I’ve seen our dog go through a beef sausage in under 100 milliseconds.

If you want your game to run at 60 frames per second, 16 milliseconds is all you have to get everything done: moving bullets around, creating new entities, drawing sprites, checking collisions, tracking and changing states, handling input and playing sound. Whatever happens regularly in the main game cycle needs to operate as efficiently as possible. Even at a lower-performing frame rate of 30 per second, you’ll still only have 32 milliseconds to get everything done. Speed and efficiency are important, and that importance increases over time as you add more things to your game.

What’s garbage collection, and why do I care?

If you’re developing a game that has many things happening at the same time, say a weapon that fires missiles 5 times per second – not an unreasonable weapon fire rate for a high-speed shooter – you’ll quickly discover that one area of substantial impact to performance is object construction and subsequent garbage collection.

As your classes grow in size, and possibly in complexity, you’ll begin to notice lag introduced when you construct something new; this is exacerbated if you’re doing complex setup of sprites and sounds (even if they are cached in static resources). Creating lots of objects also has the side effect of generating garbage collection.

For those new to the concept, JavaScript, like many other interpreted languages, frees you from having to manage memory; you can create objects at will, without really having to keep track. The browser (or to be more specific, the JavaScript Virtual Machine running inside the browser) will come along periodically and clean up anything you’re not using anymore. This part of the system is the garbage collector (GC) – you can think of it like the ultimate housemaid.

Depending on the browser, and number of objects you have in use, the process of garbage collection can take anywhere from 10ms to 2000ms. The more things it has to check to be cleaned, and the more cleaning it has to do, the longer it will take. If you’re writing a game with independently moving objects, like an action game, this pause is going to at best noticeable, or, at worst, a series of frustrating stalls that kills the experience.

Read the rest of this entry »

Global Composite Operations – Your Canvas Utility Belt

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

The past year has seen wonderful growth in the popularity of 2D Canvas; it’s been great to see so many people getting comfortable with the 2D context. Canvas is almost synonymous with HTML5 gaming and supported in all modern browsers including Chrome, Firefox, and Internet Explorer 10 and 9.

One thing that many people take for granted is the “bottom to top” canvas drawing order; putting down the background first, then objects in the middle of the scene, and finally drawing the foreground.

It’s true that this is how canvas works by default, and there’s a specific name for it; it’s called the source-over global composite operation (GCO).

What many people don’t know is that you can reverse this order – by setting ctx.globalCompositeOperation = destination-over, you can actually draw the background last, and it will go under what’s already been drawn on your canvas.

There are a total of eleven total GCOs at your disposal. There used to be an even dozen, but the black sheep of the bunch – darker – has unfortunately been abandoned.

Canvas Global Composite Operations

In general, you should use source-atop, because it has been the focus of much optimization and is relatively fast. However, there are times when the scene you’re trying to create is difficult or impossible to pull off with source-atop alone.

The GCO modes apply to every pixel that goes onto the canvas. Whether drawn via fillRect, stroke, drawImage, fillText, or anything else – they are all subject to the active GCO. Happily, as the GCO is set on the canvas context, it is subject to the same save/restore (push/pop) behavior as all the other contextual fields (scale, rotation, fill style, global alpha, etc).

This article will explore two of the lesser known GCOs – source-atop and destination-out – and show how they can help you solve some common problems in game graphics programming. Read the rest of this entry »

How to Make FullScreen Page Transitions with CSS

Posted · Category: Information, License Free

Codrops has shared Fullscreen Layout with Page Transitions with us. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again.

Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back. All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

full-screen-transitions

Requirements: JavaScript Framework
Demo: http://tympanus.net/Development/FullscreenLayoutPageTransitions/
License: License Free

Page 16 of 39...«121314151617181920»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons