WebAppers

/ best free open source web resources /

Shopify

Deft and Intuitive Character Movement in HTML5 Games

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer. Recently, I released Empty Black, my 2D shooter/puzzler/platformer. In this article, I’ll describe how I made the player movement deft and intuitive. Play the game before you read on, so you’ll know what I’m talking about.

My general approach was to change something, then try it out. I took the ideas for adjustments from several sources.

One. I examined the parameters affecting the movement of the player characters in other 2D platformers. Is the floor slippy? What is the ratio of sideways movement to jump height? Does the character accelerate as it moves? Is the character’s jump height affected by the length of time the player holds the jump button? Is the character slowed when it bumps into a moveable object?

Wolfenstein-3D

Two. I examined the unusual behaviours of the player characters in other 2D platformers. Super Meat Boy makes the character leap away from the wall automatically when wall-jumping. Spelunky lets the character pull himself up and over ledges. In Castlevania, the character can do an extra jump while in mid-air. Three. I got people to play test. Kemal told me that the character movement should be effortless. Specifically, if the character hits a wall near the top, it should slip up and over. Ricky told me it was weird that the player had no control over the height of the character’s jump. He showed me how, when hopping over an obstacle in a room with a low ceiling, he bumped his head. Ricky also pointed out the jarring effect of the initial slow down of the character when it lands after a jump. Everyone told me that airborne movement was too sensitive. Everyone told me that wall-jumping was too finicky.

Four. I read pieces written by programmers about their character movement algorithms. These pieces were mostly confined to short comments, rather than in-depth analyses. Hence, this article.   Read the rest of this entry »

How to Make Sprite Animations with HTML5 Canvas

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer. It has been authorized to be published on WebAppers.

Sprite Fundamentals

I’ve always loved web games; they’re just fun to make, easy to code (mostly), and there’s something really nice about how accessible a game is when the user just has to click a link to start playing.

Ajax and moving dom elements around made for some fun, but limited in what kind of experience you could create. For game developers, things are changing, and quickly. HTML5 is introducing a bunch of new options for game development purely in the browser, and the browser vendors are competing hard to be the best platform for the new standards.

sprite-animations

So from a game developer’s perspective everything is going in the right direction: 2D  and 3D hardware-acceleration, high-performance javascript engines, integrated debuggers and profilers, and, probably most importantly, browser vendors who are actively racing to be the best for serious game development.

So the tools are becoming usable, the browsers capable, and the vendors are listening, we can just go make awesome games right? Well, mostly.

HTML5/Javascript game development is still early, and there’s pitfalls to avoid, as well as choices to make on which technology to deploy.

In this article I’ll run through some of the choices to be made developing 2D games, and hopefully give you some ideas for developing your own games using HTML5.

Read the rest of this entry »

205 Killer Photoshop Actions from Mighty Deal

Posted · Category: Information

Photoshop can do some magical things. By combining all sorts of tools, you can literally make thousands of variations to a single photo. And with Photoshop action sets, you can do it all with pretty much just a click.

If you’re looking for a ton of new creativity to add to your Photoshop toolbox, then have we got the Mighty Deal for you! From PhotographyPla.net comes a massive Photoshop Action Set Bundle!

You’ll get 14 premium Photoshop action sets for a total of 205 individual actions. This bundle includes the following actions: Fashion, Autumn, Vintage, Sunset & Sunrise, Black & White, Faded & Hazy, Light Leaks, Monochromatic, and more. The actions in this bundle require Photoshop CS4, CS5, or CS6.

photoshop-actions

These high-quality action sets normally cost $238 when purchased individually, but for a limited time only, you can get the entire bundle of 205 actions for just $17!

Adding WinJS Controls to a Windows Store App

Posted · Category: Information

The Windows Library for JavaScript provides a set of new controls designed for Windows Store apps using JavaScript, such as the WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView, and WinJS.UI.Rating controls. It also includes two style sheets (one with a dark color scheme and one with a light) that give your app the look and feel of Windows 8.

Prerequisites

What is the Windows Library for JavaScript?

The Windows Library for JavaScript is a library of CSS and JavaScript files. It contains JavaScript objects, organized into namespaces, designed to make developing Windows Store app using JavaScript easier. Windows Library for JavaScript includes objects that help you handle activation, access storage, and define your own classes and namespaces. It also includes a set of controls: Read the rest of this entry »

A Collection of Interactive Experiences Created in HTML5

Posted · Category: Information

Jongmin Kim worked as a senior interactive designer / developer for over six years in South Korea. He has received multiple awards, including the Red Dot award, the IF award, the FWA award and the Webby award.

He always tries to “pursue a minus design rather than plus designs” and keeps in mind that “form follows function.” His style is minimal and clean, using the golden ratio and interesting typography. Form Follows Function is a collection of interactive experiences. Each experience has its own unqiue design and functionality. All the experiences are created in HTML5, the site works beautifully on both desktop and tablet.

fff

Source: http://fff.cmiscm.com/

Modernize Your HTML5 Canvas Game Part II

Posted · Category: Information

HTML5 features in modern browsers like Internet Explorer 10 make possible a whole new class of Web applications and gaming scenarios. This two-part article demonstrates how I’ve used some of these new features to modernize my last HTML5 game, HTML5 Platformer. In Part 1 of this article, I covered how to use CSS3 3D Transform, Transitions, and Grid Layout. In this article, I’ll show you how to use the offline, drag-and-drop and file APIs to implement some interesting new ideas.

Playing a Game in Offline Mode

The original version of my game worked only if your device was currently connected to the Internet. If you wanted to play to my fabulous game while you were on the train, in a taxi, or somewhere else without an Internet connection, you were out of luck—stuck without access to the awesomeness. And that’s too bad, because there really isn’t anything in my game that needs a live connection to the Web server once all the resources have been downloaded. Fortunately, offline APIs provide a solution for this in HTML5.

Read the rest of this entry »

Future Insights Live 2013 at MGM Grand Las Vegas

Posted · Category: Information

Future Insights Live 2013 is a 4-day event, comprised of one optional workshop day followed by 5 tracks and our hands-on labs over 3-days. FILive will discuss the future technologies, platforms, and business models YOU should be using and implementing to launch the next big thing.

No matter your level of ability, nor whether you are a designer, developer, product person or entrepreneur, this is the event for inspiration, education, and networking that you don’t want to miss.

future-insights

Overview

  • Coverage of the hottest web & mobile development, design, and business topics.
  • World-class speakers from across the globe.
  • Packed schedule: full day workshops, multi-track conference & hands-on learning labs.
  • Incredible atmosphere: hundreds of like-minded web folk descending on Vegas
  • All levels accommodated, something for everyone.

Workshops

  • Designing an Elegant Mobile User Experience Across Multiple Devices and Platforms – Erik Loehfelm
  • HTML5 & CSS3 Masterclass – Ryan McGinty
  • Interaction Design Beyond the Wireframe – Lis Hubert
  • Your money or your life? Designing a business that won’t kill you – Carl Smith
  • Adding Realtime Event Handling to Any Website or App – Jason Lengstorf
  • Getting Going With Node.js – Paolo Fragomeni

You can sign up with “WebAppers” discount code in order to get 10% off. Don’t forget to book your place before 1st Febuary 2013.

How to Adapt Your Site to Different Window Sizes

Posted · Category: Information

Modern browsers like Internet Explorer 10 support the width and height properties of the W3C Working Draft CSS Device Adaptation. This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular, it enables sites to easily adapt to Windows 8 browsing on touch-enabled tablet devices in the snapped view and in portrait orientation.

Auto-Scaling and When It Is Used

Most websites have prioritized optimization for a 1024 pixel wide window. This ensures a good user experience for a wide variety of displays when the browser is maximized. However, sites may not work well on new form factors like tablets and portrait screen orientation if they haven’t optimized for other window sizes as well. In particular, pages often clip or distort layout when viewed in a narrow width.

This narrow layout is particularly important in Windows 8, where the snapped view of the browser is in this exact state. This situation also occurs for portrait mode on slate devices due to the smaller form factor. Read the rest of this entry »

Windows Store Apps VS Traditional Web Apps

Posted · Category: Information

This post provides an insight into some differences in the coding practices used in existing Web apps written in JavaScript and Windows Store apps using JavaScript. It provides guidelines for Web developers to understand how code that is optimized for Windows relates to apps that are meant to be migrated among platforms with ease. It assumes that the reader is familiar with JavaScript programming and World Wide Web Consortium (W3C) standards.

Introduction

The Windows 8 provides a platform for building new Windows Store apps for Windows. Windows Store apps can be written in different programming languages including ECMAScript 5 compliant JavaScript.

The Windows Runtime enables apps that can leverage the power and broad capabilities of Windows combined with the strength, ubiquity and simplicity of standards-based web technologies.

windows-store-apps-web-apps

In fact, when authoring an app in JavaScript, the developer may choose to use existing web standards. This allows the greatest interoperability with other standards-compliant platforms. However, the Windows Runtime also enables developers to build Windows Store apps with JavaScript that are optimized for the Windows platform.

Depending on your objectives, the best approach to architect your apps will differ. The choice becomes easier if you consider the guidance that follows. Read the rest of this entry »

Gradual Engagement to Increase Your Conversion Rate

Posted · Category: Information

The difference between a 5 step registration flow and a single step registration flow is less than the difference between a single step registration flow and none at all.

The goal of this article is to present arguments for why using Gradual Engagement is a good design principle for web and mobile applications. The ideas listed below are directly drawn from our experience of using Gradual Engagement principles when designing Filepicker.io.

filepicker

When you’re designing your new-user flow for your website or mobile app, the de-facto approach is to send them as soon as possible to a registration page. But there’s another way, a way that emphasizes gradually building a relationship with your user before asking them to register for an account. It’s called Gradual Engagement and can be surprisingly effective at increasing your overall conversion rate and user stickiness. While gradual engagement is not a new concept, it’s increasingly important in this era of mobile apps and social logins. Read the rest of this entry »

Page 17 of 36...«131415161718192021»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons