2815 items (866 unread) in 18 feeds
[CHK]
(53 unread)
Die Schatenseite: Weblog
(110 unread)
Updates vom Chaostreff Dortmund
(54 unread)
evilgenius
(4 unread)
Abakia Weblog
(24 unread)
mareike
(9 unread)
blog.darkhawk.de
(41 unread)
Lucas' Blog
(19 unread)
seppo
(26 unread)
fish 2.0
smashs hideout
(82 unread)
jsilence.org
(13 unread)
proGamlers Zimmerchen Blog · progamler.free.de
(4 unread)
my open mind
(2 unread)
Uha, I nearly forgot that. I wrote an article on HTML5 technologies in games development for the Gameslabor. This time, it is written in german language, so I’m sorry for the international audience.
Just have a look at Gameslabor: Warum HTML5 auch für Games interessant ist.
Do you like oldschool effects? Well, yes I do! Therefore I had a late night coding session yesterday. I had some fun with canvas and pseudo 3d vectors.
For those of you who’ve been grown up in the scene’s golden days the output may seem pretty default. Even for the newer graphics dev generation, this might be nothing ground shaking at all. But since I’ve noticed, that there are a lot web expriments on the net, which are about to use pseudo 3d and rotations, but are unable to spinning around more than one axis at a time, this shall be my contribution to you.
Since the JavaScript fever hit me, I’m very busy at this topic. Especially I’m very busy with developing a JavaScript Canvas application. I would really love to write more about the app and give some snapshots, but because it isn’t finished yet, you’ll have to wait a bit more longer for the project to turn public.
Never the less I would like to share some experiences concerning object orientation in JavaScript. Many of you may remember JavaScript as the technology which enhanced HTMLs abilities to the worst. Responsible for pop-ups, evil cookies with a touch of annoying procedural syntax. You better forget about that quickly. JavaScript has become a quite powerful language, not only when it is about client side development. And only because many developers are still excellently ignoring the languages possibilities in case of object oriented programming doesn’t mean, that there aren’t any.
JavaScript is using so called prototyping for it’s object instantiation. Yes, using object orientation might be several times slower than just writing procedural code. But as history has proven, there are many good reasons for object oriented code design. Have a look at the following example code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | MyProject = {};
MyProject.Foo = function() {
this.initialize();
return this;
}
MyProject.Foo.prototype = {
// called by constructor
initialize : function() {
this.message = 'foobar!';
},
// instance method
bar : function() {
alert(this.message);
}
}
// main
var obj = new MyProject.Foo();
obj.bar(); |
There are some other possibilities for writing the object code. I did choose this one over the others, because it’s compact, clean and probably the best performing way. If you are familiar with other languages using the object oriented programming paradigm, you might have recognized some differences. The code doesn’t seem to have a classic class declaration syntax. Instead of this the code has been split up into three important parts. The line MyProject = {}; isn’t really necessary but very helpful to keep track of your classes when a project grows bigger. It’s the DIY way of creating a namespace alike structure. The empty curly braces are JavaScript specific syntax for creating empty objects. It’s the simplies way to create objects or dictionary data scructures. JavaScript as well as ActionScript (ECMA Hooray!) doesn’t differentiate at that point, because JavaScript doesn’t depend on static types. That enables you to link every type of language element into the pseudo-namespace at every time. That’s exactly what’s happening in line 3: MyProject.Foo = function() {…}.
These lines simple create an attribute or the object represented by the MyProject variable, actually behaving as Namespace. The Value of MyProject.Foo will be a function, which only job it is to call the this.initialize() method. Speaking of object oriented theory, this is the object construtor. It’s just calling an initialization method and returning itself to the caller. Yes, exactly itself. Therefore we need to combine the call of MyProject.Foo() with the new statement in front of it. That creates a new copy of any given object, as you can see in line 21.
Lines 8 to 18 are containing the prototype implementations of the MyProject.Foo class. Watch out for the leading this. in front of every access to functions or variables of the current instance. Unlike Java or ActionScript for example, JavaScript doesn’t auto detect the function of variable scope by itself. Every call without scope declaration, will be executed within the current function scope.
Phew, pretty much to handle yet. As you can see, there are a lot differences between object orientation as we know it by languages like Java, Ruby or C++ and JavaScript. But at least there are only a few basic principles that you may keep in mind when developing JavaScript the OOP way:
Today I’m writing about a quite popular topic. At least it seems popular to me, because lots of my friends and many people whose postings I follow have mentioned it once or even regularly. I’m talking about so called life hacking literature. But in my opinion using the term life hacking is confusing and misconcepted. It promises to just fix all your problems by some easy to use “hacks”. As a software developer talking about hacks, isn’t very serious at all. A hack is just the ugly little sister of a beautiful solution. So I think it’s ways better to talk of productivity literature. At least who wants his life to be puzzled and glued together by lots of hacks. From nothing nothing comes!
Some time ago I myself wasn’t into these sort of books. Thinking about this subject bubbled up some strange associations onto my mind. It felt like something between spiritual new age philosophies mixed with a self-help group, finally bound to a paperback. So I never felt the need, to get in touch with those kind of books. But as you can see one day I changed my mind.
I became curious, because many people I appreciate started to read these lousy books. There were hundreds of different topics for several fields of life. As a sceptic I focused on subjects I am familiar with. Programming and creativity for example. I started out with The Passionate Programmer (Chad Fowler), followed by The Creative Habit (Twyla Tharp) and finished with an almost classic: The Power of Less (Leo Barbauta). This is not going to be a detailed review, because there are pretty enough recensions on Amazon or even on the net already. I’m more about to point out the similarities of these three and why each book is worth to be read.
All these books are about methodologies. They don’t promise worlds to you nor do they polish up your ego with bold shiny lies. Nearly the opposite case can be found here. Forseen of some exceptions the concepts seem very down to earth to me and are applicable for software developers as well as for designers or students.
The authors are writing about focus, serious work, skill training and skill development. Especially repetition is one of the major concepts. This may seem pretty boring to the most of us. But you definitely shouldn’t underestimate the value of good work habits. And habits can be developed the best, by doing tasks consciously and often. Just do them consequently for a while and chances are good, that even unbeloved tasks (like paper works, cleaning, rising up early in the morning) may feel comfortable soon. This type of conditioning also helps you to develop habits you don’t have to think or care about later. Managing your document folders for example. If you’re once are used to file them right away, you’ll never have to search for them later.
Well now. I didn’t want to start up yet another life hacker productivity blog, as there are yet enough of them on the net. This book tips just shall be my two cent to the nowadays global productivity movement. I especially enjoyed The Passionate Programmer because to be a developer is my passion, too. This book delivers many interesting positions on what defines a good coder and how to develop important (language independent) engineering skills.
I like The Creative Habit for inspiring me much when it comes to see creativity as a habit which wants be trained regularly. Even the rituals chapters were very interesting. But you’ve to bring in some stamina, because Twyla Tharp writes about and compares a lot with ballet/dancing/classics. Yet another interesting subject Twyla writes about is the loss of skills. Which skill would define you, if you would have lost you current major skill. Ever thought about that one?
The Power of Less seems to be a quite good instruction set, if you’re unhappy with your current way of organizing things. So if you seek guidance out of your personal office mess this book may be the right one for you.
Lately I spend some hours for a research on WebGL. It’s quite amazing in which ways internet technologies have evolved. I still remember times, when it was nearly impossible to render any graphics using JavaScript only. Nowadays it’s one of the minor difficulties since we have technologies like SVG or Canvas. Even after animated realtime graphics are nothing special anymore, there’s a new player in town: WebGL.
3d computer graphics in web applications seem to be still a topic thats is heavily associated with technologies like flash, shockwave or other plugin based platforms. This may become history soon. At least if the development of WebGL browsers will proceed as it currently does. If you already use a WebGL enabled browser and had a look at one of the several examples as they appear constantly on [learningwebgl.com], then you will figure out quickly what I’m talking about.
Beside the usual operations we are familiar with from nearly any 3D engine, the most Important part on WebGL seems to me that we are able to use vertex and fragment shaders in the usual native way. While the whole application code is written with JavaScript, the shader programs will be implemented in a C style shader code. In the end nothing special for OpenGL veterans. But hey! Exactly that’s the point! If you’ve ever developed your personal, most awesome shader ever, there’s the possibility to reuse or partly use them for WebGL. There’s an amazing experiment written by Inigo Quilez about this shader topic. It’s called Shadertoy (don’t forget to use a WebGL enabled browser). The Shadertoy website, currently offers you about 28 sample shaders of different kinds. All are looking very pretty and all are native shader programs, which are executed on the graphics accelerator. Hardware acceleration for Webapps: Just great!
The basic possibilities offered by this technology may end into enourmous impacts for webstandards. You already may have recognized the Flash Gordon Project of Tobias Schneider. His approach is to implement an open source flash runtime, written in JavaScript. Imagine this implementation, using the powers of GL rendering. Or ways better: a new runtime plattform using WebGL as rendering layer.
Enough of nerdy enthusiastic day dreaming. There are still some difficulties with WebGL. At first of course, the minor density of WebGL enabled browsers out there in userland. But there’s a silverline on the horizon: last September Mozilla announced to implement WebGL in future versions of Firefox. The current nightly builds yet implement it, but it’s disabled by default. So it’s just a matter of time, when WebGL will be available easily by default.
Second flaw: It is quite uncomfortable to keep track of all matrix transformations by yourself. Bare WebGL won’t do that job for you. Many examples on the internet (including the Learning WebGL lessons) implement their own helper functions for identity loading, by encapsuling Sylvester (vector and matrix math for JavaScript) routines. That’s a common but never the less hacky way to fix the problem. And even creating simple basic shapes still produces a lot of code. Many shaders are embedded directly into HTML code, like it is well know from CSS or JavaScript embedding. That feels pretty ugly, when you’ve a complex WebGL application in mind.
In my opinion, the best solution for this case is WebGLU by Benjamin DeLillo. This library is a set of frequently high usefull routines for developing your very own WebGL application. You can load externalized Shader code, enjoy the ease of a camera and many more fine features.
So if you are interested into WebGL now, you should have a look at Learning WebGL. It’s in my opinion one of the best and most up to date resources on the net. If you are interested in the papers and basics of the new standard, it’s the best to search The Khronos Group website for further information.
If you’ve any other interesting news or resources for WebGL, please leave a comment or message me on any of the known ways.
The numerous amount of available jump’n'run games on the internet is really overwhelming. You can get them in every taste and color. Starting with 8 bit up to 32 bit, 2D pixel based or full featured 3D. For beginners, intermediates or bad ass pro gamers. From very good ones down to unbeliveable bad ones.
Today I want to tell you about a very special jump’n'run game. It’s a game which is definetly worth to write about. Today I’m talking about Braid. It’s made with lovley painting style graphics and tells a story which differs to the classic mario clone plot (go rescue the princess, kill everything on your way and jump around as much as you can).
var flashvars = { width: "530", height: "253", autostart: "false", repeat: "false", backcolor: "111111", frontcolor: "cccccc", lightcolor: "66cc00", stretching: "fill", enablejs: "true", mute: "false", skin: "http://www.abakia.de/blog/wp-content/plugins/proplayer/players/skins/default.swf", logo: "http://www.abakia.de/blog/wp-content/plugins/proplayer/players/watermark.png", image: "http://www.abakia.de/blog/wp-content/plugins/proplayer/players/preview.png", plugins: "", javascriptid: "310pp-single-4b975f745f5d4", image: "http://www.abakia.de/blog/wp-content/plugins/proplayer/players/preview.png", file: 'http://www.abakia.de/blog/wp-content/plugins/proplayer/playlist-controller.php?pp_playlist_id=310pp-single-4b975f745f5d4&sid=1268211573' }; var params = { wmode: "transparent", allowfullscreen: "true", allowscriptaccess: "always", allownetworking: "all" }; var attributes = { id: "obj-pro-player-310pp-single-4b975f745f5d4", name: "obj-pro-player-310pp-single-4b975f745f5d4" }; swfobject.embedSWF("http://www.abakia.de/blog/wp-content/plugins/proplayer/players/player.swf", "pro-player-310pp-single-4b975f745f5d4", "530", "253", "9.0.0", false, flashvars, params, attributes); .But the killer feature of Braid is the smart usage of time manipulation. Yes, you’ve read right! Time manipulation.
All puzzles in this game (consisting of 6 worlds, with round about 5 levels, each level containing 2 or 3 puzzles) have to be solved with backwards time traveling, phantom time activities and spheres which can slow down time.
Now talking as myself as a developer, I’ve to admint that the game has very clever useage of relations between coordinate space and runtime/gametime. There are levels, where the future time is mapped to the positive x-achse of the games coordinate space. I mean how AWESOME is this?
Enough talk! Go and have look by yourself!
If you are interested in the game now, you take the opportunity to buy it for a bout 10 euro at the Playstation Network Store, via Steam for your PC or probably for just a bunch of bucks at the XBox360 Store. In my opinion it’s worth every single cent! Enjoy! 
Okay, everybody stay calm now, there’s no reason to panic: I got a new showcase! Yes, it’s a brand new one. Please… ladies and gentlemen, please! Let’s behave like well civilized people. There’s enough for every single one of you.
After my last showcase went broken some months ago, I promised to myself to create new one next (actually THIS) year. You may see the results at [www.abakia.de]. I made heavy use of native flash features, as well as of my interactive framework called Monosodium.
So actually this is also a double release party. When I started developing ActionScript Flash in 2008, I also began to collect often used chunks of code and glued them to build a giant tar ball of death. No, that’s not what the framework is actually made of. In late 2009 I throw away the prototype and started to create a better version of the old framework library collection… frankenstein monster.
The rewrite resulted in a lightweight and easy to use flash framework, for creating view based interactive flash apps. There’s probably nothing ground shaking with this framework but it’s my very personal 2 cent and “thank you” to the flash community itself. The project is still lacking some documentation. But I’m working on that as I continue integrating features and refactoring the code. Yes, the framework is still under heavy development. You know the game’s name: commit early, commit often and listen to the audience.
So if you’re interested in the framework, please give me some feedback on that.
Special thanks goes out to Sebastian Deutsch (9elements), for supporting me while developing Monosodium in the early stages.