Category Archives: JavaScript

Phaser and multi-resolutions textures issue

Raise your hand , and comment on this issue if you find it important.

Hey guys, the last months have been very exciting! We’re still working hard on A Blind Legend, there should be some blog posts about it sooner or later (you know how indie games are going)… 🙂 Next to that, we’re working on some HTML5 games. We already made several using pixi.js (with pure JavaScript and TypeScript) and others with Flambe (based on Haxe).

That time we wanted to test an other popular framework: the famous Phaser game engine. We had a long debate internally to choose the language we’d pick up between pure JS, Haxe and TypeScript and we finally opted for Haxe. There were already some Haxe externs for Phaser so that was great.

As Citrus Engine‘s developers, we were confident that Phaser comes with many good options on top of PixiJS (it is build with it) that we’d appreciate: state management, physics, multi-resolution support, sounds… However our journey isn’t as shiny as we hoped (we’re looking at you multi-resolution support)!
Continue reading Phaser and multi-resolutions textures issue

Dargaud cartography, pure JavaScript isn’t so bad…

New year comes with plenty new resolutions, one of them was to finally give a serious try to a small project into pure JavaScript. I used to swear on JavaScript every time it was mentionned. I made several projects using TypeScript and Haxe, and I’m very happy with those techs. But, if there is some strong libraries (Pixi.js, Phaser, three.js) made in pure JavaScript, there are certainly some reasons !? And when you know that those guys are all ex-flashers, you think that they would use a compiled language. But not at all, they don’t want to depend on a company (since Adobe’s failure on Flash…), freedom feeling you said?

Continue reading Dargaud cartography, pure JavaScript isn’t so bad…

Taking screenshots with Flambe, fighting multi-platforms

I enjoy playing with Flambe. It’s the only tech (except OpenFL) which enable you to have a SWF, Canvas & WebGL browser game with one code base made in Haxe (like OpenFL).
Having those three targets, you’re sure to reach your audience at 100%. However one feature, taking an in-game screenshot, may ruin your multi-platforms adventure.
Continue reading Taking screenshots with Flambe, fighting multi-platforms

Assassination Classroom, back in love with the web!

Hey guys, it has been a long time since I didn’t make a project for the web. Some years ago, I decided to go away from my web training and learnt native languages (Objective-C) and focus on cross platform tools (Flash/AIR, Unity and Haxe NME which is become OpenFL). You will say that HTML5/JS is the most cross platform tool which exist, that’s right. However as a developer, I thought it wouldn’t improve my skills like Objective-C or even Unity using C-Sharp did. And that’s always true! JS isn’t a smart language, and it isn’t very interesting to deal with it (no interface…).

However some weeks ago, someone offered me a game project using HTML5 technology, and I said yes! Why the hell, I said yes? Because web has evolved. It is far to be perfect right now, but I think the road is the good one. It’s amazing to be able to play your game in any browser on your computer and your smartphone! No apps to download, just go to an URL.
Also on a technology part Canvas performances are improved “each month”, and WebGL support climbs. JavaScript is still a piece of shit but we have many meta languages (Haxe, TypeScript, Dart, CoffeeScript) doing a great job. On an other part I heard about pixi.js some months ago, a WebGL rendering engine with a Canvas fallback and I wanted to give it a try.

Continue reading Assassination Classroom, back in love with the web!

New portfolio online

Before starting to seek a new job, preferably at Lyon (France), it was about time to make a new portfolio! This last two years, I worked a lot with Flash, Php and Objective-C. I wasn’t up to date on the last web tools, so I decided to make my new portfolio in HTML5/CSS3 and try some new tools!

I’ve used the HTML5 Boilerplate as a template to start, resetting CSS style and offering a strong HTML5 base page. Then I gave AngularJS a try. It’s a JavaScript MVC framework powered by Google, very powerful. For the background, I used the canvas tag. At first, I started code it from scratch but there was an opportunity to test an other framework : KineticJS. It’s very easy to handle coming with a Flash background. I’ve also give a try to the new GreenSock Animation Platform which handles TweenLite/TweenMax for JavaScript! And finally using Signals in JavaScript.

The “classic” web has greatly evolved this last years, that was cool to play with those new features/tools!

JavaScript slider made with haXe and JQuery

After playing with haXe and Php, it was time to try haXe and JavaScript! I used the JQuery library included in haXe. For more information on haXe JS take a look on its website.

Click here to see the slider in action. It uses keyboards and a timer. The slider centers a picture with a 50px margin, there is also a red or green filter.

Continue reading JavaScript slider made with haXe and JQuery

My thoughts on Flash and its recent events

Update : Unity3D has set up an exporter to target Flash which works very well! Without doubt they are working on an exporter for HTML5 too. This technology seems to be promising, I’ve added it on my to learn list!

I wouldn’t come back on the Adobe announcements, everyone know what’s happened and it has already been discussed everywhere. I just would like to share my student point of view about the future.

Continue reading My thoughts on Flash and its recent events

Quick look into ThreeJS


Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /homepages/8/d317303823/htdocs/blog/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

This two last weeks were very exciting thanks to Adobe’s announcement : a new framework for 2D games : Starling, running on top of Stage3D (Molehill). Flash Player 11 is out henceforth, new 3D frameworks are coming : Adobe Proscenium, Aerys. And other big things like Unreal Engine 3 with Unreal Tournament 3 in our browser !

There’s a lot to digest ! Starling may be the next thing I will experiment…

Anyway, before all this annoucement, I was keeping an eye on JavaScript and its most awesome framework : ThreeJS created by Mr Doob. ThreeJS is a “lightweight 3D engine with a very low level of complexity — in other words, for dummies”. Dummy ? This is what I’m with 3D engine… in fact this is the first time that I try a 3D engine… so let’s start !

The three.js repository is on github with code source and many examples.
I started to learn ThreeJS with Ilmari Heikkinen’s slides that you can find here. It is really a good way to start.

Click here to see my experimentation.

I used three.js with WebGL render. My source code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
        <title>three.js</title>
        <style type="text/css"> 
            body {
                color: #808080;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
 
                background-color: #ffffff;
                margin: 0px;
                overflow: hidden;
            }
 
            #info {
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
            }
        </style>
    </head>
    <body>
 
        <div id="container"></div>
        <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a></div>
 
        <script type="text/javascript" src="Three.js"></script>
        <script type="text/javascript" src="raf.js"></script>
 
        <script type="text/javascript">
 
            var renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setSize(document.body.clientWidth, document.body.clientHeight);
 
            document.body.appendChild(renderer.domElement);
 
            renderer.setClearColorHex(0xEEEEEE, 1.0);
            renderer.clear();
            renderer.shadowCameraFov = 50;
            renderer.shadowMapWidth = 1024;;
            renderer.shadowMapHeight = 1024;
 
 
            var fov = 45; // camera field-of-view in degrees
            var width = renderer.domElement.width;
            var height = renderer.domElement.height;
            var aspect = width / height; // view aspect ratio
            var near = 1; // near clip plane
            var far = 10000; // far clip plane
            var camera = new THREE.Camera(fov, aspect, near, far);
            camera.position.z = -400;
            camera.position.x = 200;
            camera.position.y = 350;
 
            const NBR_ELEMENTS = 250;
 
            var scene = new THREE.Scene();  
 
            var light = new THREE.SpotLight();
            light.castShadow = true;
            light.position.set( 170, 330, -160 );
            scene.addLight(light);
 
            var tab = [];
            var sprite;
 
            for (var i = 0; i < NBR_ELEMENTS; ++i) {
                sprite = new THREE.Mesh(new THREE.CubeGeometry(25, 25, 25), new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff}));
                sprite.castShadow = true;
                scene.addChild(sprite);
                if (i == 0)
                    sprite.position.x = Math.random() * 1000;
                else
                    sprite.position.x = (Math.random() > 0.5) ? Math.random() * 1000 : -Math.random() * 1000;
                sprite.position.y = (Math.random() > 0.5) ? Math.random() * 1000 : -Math.random() * 1000;
                sprite.position.z = (Math.random() > 0.5) ? Math.random() * 1000 : -Math.random() * 1000;
                tab.push(sprite);
            }
 
            var oneElement = false;
 
            var diffx;
            var diffy;
            var diffz;
 
            var i = 0;
 
            renderer.shadowMapEnabled = true;
 
            renderer.render(scene, camera);
 
            var paused = false;
            var last = new Date().getTime();
            var down = false;
            var sx = 0, sy = 0;
            window.onmousedown = function (ev){
                down = true; sx = ev.clientX; sy = ev.clientY;
            };
            window.onmouseup = function(){ down = false; };
            window.onmousemove = function(ev) {
                if (down) {
                    var dx = ev.clientX - sx;
                    var dy = ev.clientY - sy;
                    camera.position.x += dx;
                    camera.position.y += dy;
                    sx += dx;
                    sy += dy;
                }
            }
            function animate(t) {
                if (!paused) {
 
                     /*last = t;
 
                    sphere.position.x = Math.cos(t/600)*300;
                    sphere.position.z = Math.sin(t/600)*300;
                    sphere.rotation.y = t/800;*/
 
                    if (oneElement) {
 
                        if (tab[0].position.x < 1000) {
 
                            i = 0;
 
                            while (i < NBR_ELEMENTS) {
 
                                diffx = 0 - tab[i].position.x;
                                diffy = 0 - tab[i].position.y;
                                diffz = 0 - tab[i].position.z;
 
                                tab[i].position.x -= diffx * 0.05;
                                tab[i].position.y -= diffy * 0.05; 
                                tab[i].position.z -= diffz * 0.05;
 
                                ++i;
                            }
 
                        } else {
                            oneElement = false;
                        }
 
                    } else {
 
                        if (tab[0].position.x > 1) {
 
                            i = 0; 
 
                            while (i < NBR_ELEMENTS) {
 
                                diffx = 0 - tab[i].position.x;
                                diffy = 0 - tab[i].position.y;
                                diffz = 0 - tab[i].position.z;
 
                                tab[i].position.x += diffx * 0.05;
                                tab[i].position.y += diffy * 0.05; 
                                tab[i].position.z += diffz * 0.05;
                                ++i;
                            }
 
                        } else {
                            oneElement = true;
 
                        }
 
                    }
 
                    renderer.clear();
                    renderer.render(scene, camera);
                }
                window.requestAnimationFrame(animate, renderer.domElement);
            };
            animate(new Date().getTime());
            onmessage = function(ev) {
                paused = (ev.data == 'pause');
            };
        </script>
 
    </body>
</html>

I used raf.js to make an “enter frame” on the page, you can find the script on Ilmari Heikkinen’s repository.