background preloader

CSS3 Family Tree

CSS3 Family Tree
Related:  Dev WebProgrammingLab & Demos

The guide to implementing 2D platformers | Higher-Order Fun Having previously been disappointed by the information available on the topic, this is my attempt at categorizing different ways to implement 2D platform games, list their strengths and weaknesses, and discuss some implementation details. The long-term goal is to make this an exhaustive and comprehensible guide to the implementation of 2D platform games. If you have any sort of feedback, correction, request, or addition – please leave it in the comments! Disclaimer: some of the information presented here comes from reverse engineering the behavior of the game, not from its code or programmers. It’s possible that they are not ACTUALLY implemented in this way, and merely behave in an equivalent way. Also note that tile sizes are for the game logic, graphical tiles might be of a different size. I can think of four major ways in which a platform game can be implemented. Type #1: Tile-based (pure) Character movement is limited to tiles, so you can never stand halfway between two tiles. Slopes

Polygonal Map Generation for Games I wanted to generate interesting game maps that weren’t constrained to be realistic, and I wanted to try some techniques I hadn’t tried before. I usually make tile maps but instead used a different structure. What could I do with 1,000 polygons instead of 1,000,000 tiles? The distinct player-recognizable areas might be useful for gameplay: locations of towns, places to quest, territory to conquer or settle, landmarks, pathfinding waypoints, difficulty zones, etc. Most procedural map generators, including some of my own previous projects, use noise functions (midpoint displacement, fractal, diamond-square, perlin noise, etc.) to generate a height map. There were three main things I wanted for this project: good coastlines, mountains, and rivers. First, try the demo! Every project will have its own gameplay constraints. The first step is to generate some polygons. Here’s an example of random dots (red) and the polygons that result: The polygon shapes and sizes are a bit irregular. Modules

Creating Custom Form Checkboxes and Radio Buttons with Just CSS! In CSS we have many ways to style things in any way we want. When it gets to forms though, things get a little complicated. Text inputs are easy, but checkboxes and radio buttons are very difficult to style with CSS. Effectively, a really good idea for styling checkboxes the only way to style checkboxes, radio buttons and drop downs is with this little piece of CSS: appearance: none; This will take all browser styles off those inputs and we can start to alter them as regular elements. It’s okay though! What we can use So what weapons can we use to create these effects? Recently there has been a bit of discussion on the web about :before and :after when using forms. To get started, lets make a few checkboxes and radio buttons. The next step is some CSS. After that we set the styles for when the user clicks on the checkbox (:active) and when the checkbox is checked. Then we just need to make an :after pseudo element. And then it’s just a matter of some resizing for the big checkboxes Update!

CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility Credits This trick was found on

Responsive Web Design just got Easier with the Responsive Grid System Starfighter: Code. Play. Hack capitalism. Move a Cube With Your Head or Head-Tracking with WebGL - Learning Three This post is about head tracking and how to use it in 3D. It is surprisingly easy to do with the suitable libraries. We will experiment with headtrackr.js and three.js. headtrackr.js is a nice library from auduno to do head tracking in the browser. You will learn how to do head tracking in webgl in only 20lines of javascript. tl;dr; links For a simple example. see the “move a cube with your head” demoTo mess with the code now without any installation, see this jsfiddle examplefor an attempt to make 3d more immersive by using head tracking, see this demo WebRTC is great! WebRTC starts to get traction. auduno is part of Opera team. Demo Time !! As usual we did a plugin for tQuery API to make it easy to use in our environement. Another demo where the camera follows your head. Let’s Get Started Ok now lets see how to use this library with tQuery API. Or if you use the good old <script>, do something like that to include headtrackr.js itself, the library which handle the head tracking.

Creating Reusable & Versatile Background Patterns I haven't written any Photoshop tutorials for a while. Today I'm going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. What is so cool about this? With transparent pattern image, users can easily customize the background color by altering the hex color. Photoshop Trick: Extracting Pattern This Photoshop trick works on most pattern images. Step 1 First you have to turn the image layer to black & white (go to Image > Adjustments > Destaturate). Step 2 Now you should have a black & white pattern. Step 3 Go back to the Layers palette. Shortcut tip for loading the Channel selection: hold down the Cmd key and click on the Channel layer thumbnail. Opacity To control the instensity or the darkness of the pattern, adjust the layer's opacity. Final (see demos)

Ratchet - Les websockets pour PHP Ratchet est une librairie qui permet de créer des applications temps réelles avec échanges bi-directionnels entre clients et serveur. Elle permet donc de garder une connexion active entre un (ou plusieurs) clients et le serveur. Durant tout le temps où la connexion est active, chacun peut envoyer un message à l'autre à tout moment. Cette technologie permet donc d'envoyer des messages à tous les clients connectés dès qu'une modification survient, grâce aux listeners du serveur. Voici le process flow du fonctionnement des Websockets : Les websockets sont déjà natives dans Chrome, Firefox, Opera et Safari (même mobile), et existent sous forme de plugin pour IE 10. Pour le serveur, il faut l'installer en passant par Composer : 2. 3. Le site officiel propose un mini tuto très bien fait pour créer un chat. Il est possible d'utiliser l'application via la console, mais évidemment aussi dans un navigateur, et c'est bien là l'intérêt. Site officiel