tag:blogger.com,1999:blog-2037107846963035846Sat, 28 Feb 2015 10:30:47 +0000javascriptgame developmentcompetitiongamemobilehtmlImpossible is nothingcanvasgame mechanicstutorialjseventSGWH5conferencemibbuanimationfacebookcss3frameworksgamesongamestartzombie eliminatorzombiesgamedevgamedevelopmentmozillanode.jsnodeKOpalmworkshops10K ApartFront TrendsStairs to heaven in 6.22 KBalgorithmbadadomhackersmicrosoftpalm app catalogpalm prerandom numbersamsung waveMB engineandroidapprovalcommand linecompodemogadugadui18nideoneie hackjquerymeetjsotherpalm pixiphonegapportingprototypepublished projectspublishingpuzzleqtrhinorhodesscreen sizesellingshellsnakespidermonkeysymbiantile maptoolstower defensewebkitMichal Budzynskicode blah blah...http://michalbe.blogspot.com/noreply@blogger.com (MichalBe)Blogger68125tag:blogger.com,1999:blog-2037107846963035846.post-774875081754784748Wed, 10 Jul 2013 15:30:00 +00002013-09-25T04:25:26.170-07:00onGameStart strikes back!<a href="http://3.bp.blogspot.com/-P86Bn8A0Yr0/Ud1z2dPDJ2I/AAAAAAAAAXU/QfGffsOswd0/s1600/ogs-post.jpg" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-P86Bn8A0Yr0/Ud1z2dPDJ2I/AAAAAAAAAXU/QfGffsOswd0/s320/ogs-post.jpg" style="width:200px;float:left;margin: 10px;"/></a>It's already kind of tradition that September is HTML5 Gamedev month in Europe. Since 2011, when <a href="http://ongamestart.com/2011">first onGameStart</a> took place, we've hosted events for more than 900 game developers, designers as well as business and marketing teams. With more than 60 talks, 25 hours of workshops and 1200 liters of alcohol during the parties (so far), <a href="http://ongamestart.com">onGameStart</a> is the most important web gaming event in the world. This year (September 18-20) we will try to push it even further. We have just updated our website, and announced new speakers in our lineup. This year's edition is a unique opportunity to meet big names from the industry, like:<br/><ul><li><a href="http://ongamestart.com/#speakers-doob">Mrdoob</a> - creator of the most popular WebGL framework, <a href="https://github.com/mrdoob/three.js">THREEJS</a>.</li><li><a href="http://ongamestart.com/#speakers-collin">Collin Hover</a> - author of <a href="http://collinhover.github.io/kaiopua/">Kaiopua engine</a> and our last website (<a href="http://ongamestart.us/">onGameStartUS</a>). If you never heard of him - check his <a href="https://vimeo.com/65545063">talk from the last oGS</a>.</li><li><a href="http://ongamestart.com/#speakers-remi">Rémi Papillié</a> - from <a href="http://www.ubi.com">Ubisoft</a>, will teach us about console game dev tricks that could be useful in WebGL games</li><li><a href="http://ongamestart.com/#speakers-ivan">Ivan Popelyshev</a> - creator of <a href="http://bombermine.com/#/">Bombermine</a>, the game that was in <a href="http://www.netmagazine.com/features/top-10-html5-games-2012">Top10 of HTML5 games in 2012 on NetMag</a>. He will share his secrets about developing MMO game with canvas & Websockets</li><li><a href="http://ongamestart.com/#speakers-jasmine">Jasmine Kent</a> - formerly worked for Sega, author of <a href="http://triggerrally.com/">Trigger Rally</a>, a WebGL racing game</li><li><a href="http://ongamestart.com/#speakers-jan">Jan Krutisch</a> - will make some noise with Web Audio API (finally!)</li><li><a href="http://ongamestart.com/#speakers-yuri">Yuri Dobronravin</a> - will teach us how to run our HTML5 games with native-like performance on Windows Phone and Android, like he did with his <a href="http://www.windowsphone.com/en-us/store/app/cannons-and-soldiers/047c90f9-2958-4c0b-bcc4-7685fceb6563">Cannons & Soldiers</a></li><li><a href="http://ongamestart.com/#agenda-fullAgenda">and others, check our agenda</a></li></ul> Besides the conference, on the day before we organize fullday workshops in small groups (up to 10 persons). This year you'll be able to learn how to <a href="http://ongamestart.com/#agenda-playcanvasWorkshop">create a 3D game using PlayCanvas</a> (check <a href="http://ongamestart.com/#speakers-will">Will Eastcott</a>'s Playcanvas <a href="https://vimeo.com/53698798">presentation from last year</a> if you never heard of it before) and <a href="http://ongamestart.com/#agenda-playcanvasWorkshop">how to create game graphics</a> (and outstanding <a href="http://esotericsoftware.com/">skeletal animation with tool called Spine</a>!) if you have no artistic skills together with onGameStart veteran, <a href="http://ongamestart.com/#speakers-robert">Robert Podgórski</a>. <br/>If you still haven't decided if you want to attend, check videos from previous onGameStarts:<br/>2011:<br/><iframe src="http://player.vimeo.com/video/29885788?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><br/>2012:<br/><iframe src="http://player.vimeo.com/video/51584343" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><br/>And all the talks in here: <a href="https://vimeo.com/channels/ogs">2011</a>, <a href="https://vimeo.com/ongamestart">2012+oGSUS</a>.<br/><br/>For more details visit our <a href="http://onGameStart.com">site</a>, <a href="https://www.facebook.com/onGameStart">Facebook</a>, <a href="https://twitter.com/ongamestart">Twiter</a> and <a href="http://lanyrd.com/2013/ogs13/">Lanyrd</a>. See you there!http://michalbe.blogspot.com/2013/07/ongamestart-strikes-back.htmlnoreply@blogger.com (MichalBe)6tag:blogger.com,1999:blog-2037107846963035846.post-4807516244781654934Mon, 08 Apr 2013 01:59:00 +00002013-04-07T21:48:10.497-07:00JavaScript: The less known parts. DOM Mutations.'<i>JavaScript: The less known parts</i>' chapters:<br/>1. <a href="http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-bitwise.html">Bitwise Operators</a><br/>2. <a href="http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-storage.html">Storage</a><br/>3. <a href="http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html">Dom Mutations</a></br><br/> <a href="http://3.bp.blogspot.com/-qGVX-BlXz3U/UWIYOpjl0aI/AAAAAAAAAV8/av5sLNQmjvg/s1600/tmo2.jpg" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-qGVX-BlXz3U/UWIYOpjl0aI/AAAAAAAAAV8/av5sLNQmjvg/s1600/tmo2.jpg" style="float:left;width:300px;margin-right:10px;"/></a>At the beginning of last May, so not even a year ago, there was quite a buzz around a blogpost by <a href="https://twitter.com/davidwalshblog">David Walsh</a> about detecting DOM Node insertions with JavaScript and CSS Animations. In the article, David explained that even if <a href="https://developer.mozilla.org/en-US/docs/DOM/Mutation_events">Mutation Events</a> are deprecated, we are not powerless in detecting DOM modifications in our JavaScript code - using simple hack (and since we are web developers, we love hacks and we use tons of them every day), we can attach very short (0.001s in the given example) animation to every element that will be added to to DOM Tree, and then listen to the <i>animationstart</i> event. The animation will be to short to notice it, so the event will fire almost immediately after DOM modification. Full post is still online, you can find it in here - <a href="http://davidwalsh.name/detect-node-insertion">Detect DOM Node Insertions with JavaScript and CSS Animations</a>. Great, but is it the only way to detect node changes in JavaScript? Fortunately - it's not. Say hello to the <a href="https://developer.mozilla.org/en-US/docs/DOM/MutationObserver">MutationObserver</a>.<br/><br/>About three days after David's article, <a href="http://canuckistani.ca/">Jeff Griffiths</a> presented MutationObserver on <a href="https://hacks.mozilla.org">MozHacks</a> in an article called <a href="https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">DOM MutationObserver – reacting to DOM changes without killing browser performance</a>. In just a few words, <i>MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.</i> It's way simpler and more efficient to use native browser's API than hundreds of hacks - we are creating more dynamic webapps all the time, so <i>it seems natural that we would welcome the ability to listen for changes in the DOM and react to them.</i> <br/><br/>Below, I've reimplemented the demo from David's blogpost from CSS Animations to MutationObserver. You can find the original example here: <a href="http://davidwalsh.name/demo/detect-node-insertion.php">Detect code insertion</a>. <iframe width="100%" height="520" src="http://jsfiddle.net/michalbe/bNCS9/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/><br/>Unfortunately, MutationObserver is still a fresh feature, and it isn't supported everywhere - we can use it in only in Chrome (Desktop) & Firefox (Desktop & Android) so far: <a href="http://3.bp.blogspot.com/-690Hhcyvpto/UWIih8EzewI/AAAAAAAAAWM/gV45Vxtfzbo/s1600/Screen+Shot+2013-04-08+at+03.50.34.png" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-690Hhcyvpto/UWIih8EzewI/AAAAAAAAAWM/gV45Vxtfzbo/s1600/Screen+Shot+2013-04-08+at+03.50.34.png" /></a><a href="http://4.bp.blogspot.com/-S_gob8Sa98M/UWIih2VDHHI/AAAAAAAAAWQ/QYiI0sBT0r4/s1600/Screen+Shot+2013-04-08+at+03.50.41.png" imageanchor="1" ><img border="0" src="http://4.bp.blogspot.com/-S_gob8Sa98M/UWIih2VDHHI/AAAAAAAAAWQ/QYiI0sBT0r4/s1600/Screen+Shot+2013-04-08+at+03.50.41.png" /></a><br/><h4>MutationObserver resources</h4>DOM Mutation Observers & The Mutation Summary Library <iframe width="570" height="405" src="http://www.youtube.com/embed/eRZ4pO0gVWw" frameborder="0" allowfullscreen></iframe><br/><a href="http://code.google.com/p/mutation-summary/">Mutation Summary</a><br/><a href="https://developer.mozilla.org/en-US/docs/DOM/MutationObserver">MutationObserver on MDN</a><br/><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers">MutationObserver DOM4 Spec</a><br/><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Detect DOM changes with Mutation Observers - HTML5Rocks</a><br/><a href="https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">DOM MutationObserver – reacting to DOM changes without killing browser performance.</a><br/><br/>Do you find this kind of API useful? Do you know any other hacks related to DOM manipulation listeners? Comment here or catch me on <a href="https://twitter.com/michalbe">Twitter (@michalbe)</a>.http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.htmlnoreply@blogger.com (MichalBe)3tag:blogger.com,1999:blog-2037107846963035846.post-3096036000898274261Sun, 31 Mar 2013 23:44:00 +00002013-04-07T19:00:17.086-07:00JavaScript: The less known parts. Storage.'<i>JavaScript: The less known parts</i>' chapters:<br/>1. <a href="http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-bitwise.html">Bitwise Operators</a><br/>2. <a href="http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-storage.html">Storage</a><br/>3. <a href="http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html">Dom Mutations</a></br><br/> Client side storage is almost as old as Internet itself. Back in the days we used cookies for this, but since Firefox 2 & Safari 4 browsers support DOM Storage techniques. We are probably all familiar with <a href="https://developer.mozilla.org/en-US/docs/IndexedDB">IndexedDB</a> or deprecated <a href="http://html5doctor.com/introducing-web-sql-databases/">WebSQL</a>. Both of them are widely supported in almost all of the newest browsers:<br/><a href="http://3.bp.blogspot.com/-GovhqJ3BqMw/UU-1LrRpS9I/AAAAAAAAAVI/UIgrLSoHLlg/s1600/Screen+Shot+2013-03-25+at+03.21.49.png" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-GovhqJ3BqMw/UU-1LrRpS9I/AAAAAAAAAVI/UIgrLSoHLlg/s320/Screen+Shot+2013-03-25+at+03.21.49.png" /></a><br/><a href="http://3.bp.blogspot.com/-umo8z3PGMEI/UU-1hof12KI/AAAAAAAAAVQ/GGmKpkbUvQ0/s1600/Screen+Shot+2013-03-25+at+03.21.37.png" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-umo8z3PGMEI/UU-1hof12KI/AAAAAAAAAVQ/GGmKpkbUvQ0/s320/Screen+Shot+2013-03-25+at+03.21.37.png" /></a><br/><h4> localStorage </h4>Thats not all - we also have well known localStorage & sessionStorage key/value client storage system. We can simply save the value in one window: <iframe width="100%" height="300" src="http://jsfiddle.net/michalbe/Xwnyg/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/>And load it in another: <iframe width="100%" height="300" src="http://jsfiddle.net/michalbe/j8PYX/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/><br/>The advantage of local/session storage over IndexedDB is that we can listen to an event that fires when something has changed - we can for instance propagate those changes to all the browser cards or iframes in our application. Choose the 'result' tab in the next fiddle, go back to the first one and save something using the form. <iframe width="100%" height="300" src="http://jsfiddle.net/michalbe/YETSK/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe><br/>It's helpful also in IndexedDB based apps - for example <a href="http://pouchdb.com/">PouchDB</a> made by <a href="https://twitter.com/daleharvey/">Dale Harvey</a> use localStorage events with IndexedDB data to keep everything up to date everywhere. <br/><br/><h4> window.name storage </h4>We can also use <i>window.name</i> property to store data on the client side. This ancient method allows us to read and write data across pages and domains, even from outside the current origin. According to Wikipedia [<a href="http://en.wikipedia.org/wiki/HTTP_cookie#window.name">HTTP COOKIE</a>] we can store up to 32MB there (according to <a href="http://my.safaribooksonline.com/book/programming/javascript/9780470344729/client-side-data-and-persistence/storage_using_window.name">some sources</a> its even around 60MB). It's also accessible even before <i>domready</i> event. And even if it's not really cleaver idea in times of tabbed browsing (every new tab starts with empty <i>window.name</i>), it's still used as a fallback in for older browsers. More on <i>window.name</i> storage:<br/><a href="http://ajaxian.com/archives/whats-in-a-windowname">Ajaxian: What’s in a window.name?</a><br/><a href="http://www.sitepoint.com/cookieless-javascript-session-variables/">Cookie-less Session Variables in JavaScript</a><br/><a href="http://www.thomasfrank.se/sessionvars.html">Session variables without cookies</a><br/><a href="http://code.google.com/p/sessionstorage/">HTML5 sessionStorage for "every" browsers</a><br/><br/>See you next Monday in the 3rd part of <i>Javascript: The less known parts</i>. <a href="https://twitter.com/michalbe">Follow me on Twitter</a> and stay informed about next parts! http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-storage.htmlnoreply@blogger.com (MichalBe)2tag:blogger.com,1999:blog-2037107846963035846.post-7301701243847469296Thu, 28 Mar 2013 01:11:00 +00002013-03-27T18:11:59.349-07:00My TV Shows listI've updated the list of all the TV Shows I've watched since February 2008. So far it's 48 shows, 3295 episodes in total, what gives 1854 hours and 12 minutes (around 77 full days and nights). If you know anything I should watch, and it's not on a list (or 'Shows to consider' list), please fork my repo and update my proposals. You can also vote for other series in the 'proposals' part. <br/><br/>Github repo: <a href="https://github.com/michalbe/tv-series">michalbe/tv-series</a><br/>Rendered list: <a href="http://michalbe.github.com/tv-series/">gh-pages/tv-series</a><br/><a href="http://1.bp.blogspot.com/-QjW-iP7c3mc/UVOYkJgkzvI/AAAAAAAAAVg/8STAI8IIzvI/s1600/logotyo.png" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-QjW-iP7c3mc/UVOYkJgkzvI/AAAAAAAAAVg/8STAI8IIzvI/s320/logotyo.png" /></a>http://michalbe.blogspot.com/2013/03/my-tv-shows-list.htmlnoreply@blogger.com (MichalBe)3tag:blogger.com,1999:blog-2037107846963035846.post-5957426780934196297Sun, 24 Mar 2013 11:05:00 +00002013-04-07T19:00:09.043-07:00JavaScript: The less known parts. Bitwise Operators.'<i>JavaScript: The less known parts</i>' chapters:<br/>1. <a href="http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-bitwise.html">Bitwise Operators</a><br/>2. <a href="http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-storage.html">Storage</a><br/>3. <a href="http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html">Dom Mutations</a></br><br/> <a href="http://images.virtualdesign.pl/images/7777js-tlkp.jpg" imageanchor="1" ><img border="0" src="http://images.virtualdesign.pl/images/7777js-tlkp.jpg" style="float:left;margin-right:10px;margin-bottom: 5px;margin-top:5px;width:250px;border:1px solid #000;"/></a>Most of us probably use JavaScript every day - in my case it's building a <a href="http://www.mozilla.org/firefoxos/">mobile operating system</a> in my daily job, preparing <a href="https://twitter.com/DanPTurner/status/274025385128259587">crazy and ridiculous demos</a> for various conferences or run personal projects in my free time (mostly <a href="https://twitter.com/sex2poule/status/291823186876715009/photo/1">games</a>). But even with years of experience (probably because the language itself is full of weird quirks and unintuitive patterns), from time to time I'm still getting surprised with new crazy hacks, techniques or workarounds. I want to put most of those things in one place and publish one every Monday - for last couple of years I wasn't really active on the blog, it's time to change this. First - bitwise hacking.<br/><br/> <h2 style="clear:both;"><br/>Bitwise operators</h2> Most of us know know that there are some bitwise operators in JS. Every number has it's own binary representation, used by those operators. To check dec number's binary value, we use <i>.toString()</i> method with base argument - '2' for binary:<br/><iframe style="width: 100%; height: 200px" src="http://jsfiddle.net/michalbe/L56k3/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>There are seven different bitwise operators. Assuming that variable <i>a</i> is equal to 5, and <i>b</i> is 13, those are actions and results of their operations:<br/><iframe style="width: 100%; height: 730px" src="http://jsfiddle.net/michalbe/ZQXA9/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>Sometime we even use <i>Bitwise OR </i>as equivalent of <i>Math.floor()</i>:<br/><iframe style="width: 100%; height: 125px" src="http://jsfiddle.net/michalbe/dDUGh/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>It has the same effect as double NOT operator (my favorite rounding solution since I first heard about it on <a href="http://varjs.com/">Damian Wielgosik's workshop</a> couple of years ago).<br/><iframe style="width: 100%; height: 120px" src="http://jsfiddle.net/michalbe/XK6xN/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>What about other real life examples of bit chaking? For instance, we can convert colors from RGA to Hex format:<br/><iframe width="100%" height="300" src="http://jsfiddle.net/michalbe/pEpeM/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>We can also simply check which number in a pair is smaller (like Math.min) or bigger (Math.max):<br/><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/michalbe/t9Nfm/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>Of course since Math library is really well optimized nowadays, using those hacks doesn't make any sense. But what about variables swap? Most common solution is to create a temporary variable to achieve that, what is not really efficient. It's simpler to use bit operations here:<br/><iframe width="100%" height="300" src="http://jsfiddle.net/michalbe/Xuv69/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <br/><br/>Even with 'Pythonish' variable swap introduced in JavaScript 1.7, bitwise solution is the fastest way to achieve that. <br/>JSPerf test [<a href="http://jsperf.com/binswapwars">here</a>]:<br/><a href="http://1.bp.blogspot.com/-Z5pwlg5XDeM/UQXQ43DO6JI/AAAAAAAAAUk/cGj9Exf2A1Q/s1600/swap.jpg" imageanchor="1"><img border="0" width="430" src="http://1.bp.blogspot.com/-Z5pwlg5XDeM/UQXQ43DO6JI/AAAAAAAAAUk/cGj9Exf2A1Q/s320/swap.jpg" /></a> <br/><br/>Great place to learn more bit-tricks to make your JS app: <a href="http://graphics.stanford.edu/~seander/bithacks.html">Sean Eron Anderson's site [Stanford PhD].</a><br/>Do you know and use any more binary tricks in your JavaScript projects? http://michalbe.blogspot.com/2013/03/javascript-less-known-parts-bitwise.htmlnoreply@blogger.com (MichalBe)21tag:blogger.com,1999:blog-2037107846963035846.post-8645314743057438723Wed, 05 Dec 2012 13:13:00 +00002012-12-05T05:14:43.673-08:00onGameStart US, March 2013Since world is just too big for only one HTML5 gaming conference, <a href="http://ongamestart.us">onGameStart comes to North America on March 15 next year</a>. Together with <a href="http://collinhover.com/">Collin Hover</a>, WebGL Wizard and creator of <a href="https://github.com/collinhover/kaiopua">kaiopua game engine</a> and outstanding <a href="http://blackmoondev.com/">BlackMoonDesign</a>, (yes, they are doing also 3D stuff, not only pixelart!) we launched the site last week. Control the astronaut, meet the speakers and explore onGameStart planet & stars. <a href="https://docs.google.com/spreadsheet/viewform?formkey=dEMwZHQtcXp6Mjh0MGhoRnRKTzF3SUE6MQ">Don't forget about our Call for Paper</a> - show us your games, engines, tools or game related services and present them on oGS in New York!<br/><a href="http://onGameStart.us"><img border="0" width="430" width="663" src="http://images.virtualdesign.pl/images/80180ScreenShot2012-12-03at14.02.39.png" /></a>http://michalbe.blogspot.com/2012/12/ongamestart-us-march-2013.htmlnoreply@blogger.com (MichalBe)0tag:blogger.com,1999:blog-2037107846963035846.post-7120650613559986727Mon, 24 Sep 2012 15:40:00 +00002013-03-24T07:30:41.229-07:00Report from the battlefield - onGameStart 2012<div class="separator" style="clear: both; text-align: center;"><a href="http://images.virtualdesign.pl/images/1589aid.png" imageanchor="1" style="clear:right; float:right; margin-left:1em;"><img border="0" src="http://images.virtualdesign.pl/images/1589aid.png" style="width:148px"/></a></div> onGameStart 2012, the second version of the first HTML5 gaming conference ever, is over now. Since last year I completely changed its formula, and even if I was frightened as hell just before the event, it turned out to be wonderful (or most of the attendees were perfect liars who didn't want to hurt my feelings, but I'm quite OK with this:) ). <br/>First of all - I limited number of the attendees to 250 (instead of almost 350 last year). Why? HTML5 Gaming is quite a new movement. Even if it's growing fast, it's still not as popular as, for example, jQuery or Node.js communities. And inviting less attendees definitely helps in meeting interesting people - onGameStart is not a mass event - it's more like a meeting of our elite HTMl5 Gaming caste. Connecting them together (also with sponsors & publishers, not only other developers & designers) is one of the main onGameStart's tasks. Also - according to <a href="http://www.nonblocking.io/2011/10/jsconf-eu-how-to-guide.html">Malte Ubl, organizer of JSConfEU</a>: <blockquote>more people requires executing everything with great precision which is super unlikely for amateurs like us (Professionals can’t do this either, but they don’t care because lots of attendees means lots of money).</blockquote><br/><img border="0" width="430" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-snc6/282262_383833605019031_1874106709_n.jpg" /><br/>Also - onGameStart this year has additional, third, day at the beginning, <a href="https://www.facebook.com/photo.php?fbid=383833605019031&set=a.383832938352431.86765.139639056105155&type=1&theater">just for the workshops</a>. During the three tracks, groups up to 15 people learned how to make 2d platformer game, 3D game using your jQuery skills, or multiplayer pong game in SVG with your Flash resources. I had fantastic feedback from both, attendees and trainers, so I'll probably organize workshops again during next editions. <br/> During this year's <a href="http://front-trends.com">Front Trends</a> Paweł Czerski, one of the organizers, adviced me to shorten speech slot from 45 to 30 minutes. It's enough to inspire the audience with something new. And if the speaker is not good enough to do it, additional 15 minutes won't probably change it. For sure, I will use the same pattern again.<br/>The main keynote this year was prepared by <a href="http://jordanmechner.com">Jordan Mechner</a>, creator of 'Karateka', 'Prince of Persia' or 'The Last Express'. He is not HTML5 game developer. Actually, he has nothing in common with browser games or development at all - his last game was published more than 15 years ago. But he is an icon in the gamedev world, and has indisputable influence on video games. The story Jordan presented was great summary of a journey of a game developer (as he called it - 'From Bedroom to Attic'), and definitely it was best closing talk of a gaming conference I could imagine. I'll do my best to invite other gamedev stars for next editions.<br/><img border="0" width="430" src="http://farm9.staticflickr.com/8453/8007228782_410dc40d65.jpg" /><br/>During my opening talk I appealed to the HTML5 gaming community to stop doing tech demos and try to prove that it's mature enough to create real games. We need games, not demos, so stop doing it and focus on real games. The second big thing I announced <b>was American edition of onGameStart</b> - <a href="http://www.ongamestart.us/">onGameStartUS</a>. It will take place in New York early next year (probably 22nd of March). <a href="https://docs.google.com/spreadsheet/viewform?formkey=dG94UXdDS2ZBVjRrWnlMUUZMWU96M1E6MQ">PreRegister here</a> for the news. And track <a href="http://lanyrd.com/2013/ogsus/">the event on Lanyrd</a>. After the announcement I read a lot of tweets or personal questions about European onGameStart. So to dispel all the doubts - there will be more than one onGameStart next year - one in NY, main edition in Warsaw, and probably one more, but I will announce it later. As I said during my talk - world is too big for just one HTML5 gaming conf (actually I wrote and said that it's 'too small', but It's mostly because I didn't really sleep for about a week). So see you next year in NY, WAW, or any other place I'll bring onGameStart to. Thanks!<br/><img border="0" width="430" src="http://distilleryimage11.s3.amazonaws.com/0bc7d61a02fb11e2984522000a1e9e63_7.jpg" /> http://michalbe.blogspot.com/2012/09/report-from-battlefield.htmlnoreply@blogger.com (MichalBe)10tag:blogger.com,1999:blog-2037107846963035846.post-1716664832459521810Thu, 24 May 2012 15:41:00 +00002012-06-09T07:52:11.078-07:00canvasconferencegamegame developmentgame mechanicsgamedevgamedevelopmentgameshtml.getUserMedia puzzle gameDuring my last talks about <a href="http://bly.sk">Blysk</a> I presented couple of new HTML5 features that are quite new, and were implemented only in Flash before. Access to the webcam was one of the most interesting.<br/>VideoPuzzle on <a href="http://webrebels.org/">WebRebels</a>:<br/><a href="http://www.flickr.com/photos/webrebels/7280907460/" title="Michal Budzynski at Web Rebels by webrebels, on Flickr"><img src="http://farm9.staticflickr.com/8146/7280907460_ae6da5359f.jpg" width="430" height="333" alt="Michal Budzynski at Web Rebels"></a>And since learning by playing is always fun, I made a simple puzzle game that uses webcam to display realtime video on the puzzles. To run it you need <a href="https://tools.google.com/dlpage/chromesxs">Chrome Canary</a> with <a href="https://sites.google.com/site/webrtc/running-the-demos">Media Stream enabled</a>.<br/>I was asked to publish it somewhere so you can find the source code on Github: <br/><br/><b><a href="http://github.com/michalbe/VideoPuzzle">.getUserMedia() VideoPuzzle game</a></b><br/> or <a href="http://michalbe.github.com/VideoPuzzle/">try it now here</a><br/><br/><img src="http://images.virtualdesign.pl/images/584594.0M-pixels-sphere-web-camera-with-microphone.jpg" style="width:150px;float:right;margin:5px"/><b>Why doesn't it work in <a href="http://dev.opera.com/articles/view/getusermedia-access-camera-privacy-ui/">Opera with .getUserMedia() support</a>?</b><br/>I was superlazy writing the code (it took me less than hour, it was just techdemo, not the regular, production code). And the easiest way to determine if the pieces was dropped in the right place was to check if the previously added 'data-order' values of the DOM elements (canvas - piece & div - place in which you put the piece) are equal. I took the second element from event.target argument of mouseup event, and since dragged piece has 'pointer-events' set to 'none'. It should allow the event to go through the piece. Not in Opera. I don't know if it's Opera's or all the other vendors, there's nothing in spec about that.http://michalbe.blogspot.com/2012/05/getusermedia-puzzle-game.htmlnoreply@blogger.com (MichalBe)4tag:blogger.com,1999:blog-2037107846963035846.post-8699393472508355771Mon, 14 May 2012 23:53:00 +00002012-05-18T15:33:01.030-07:00conferencefacebookframeworksgamegame developmentgame mechanicsgamedevgamedevelopmentgameshackershtmljavascriptjsmicrosoftmobilemozillanode.jsongamestartworkshopsonGameStart 2012The most important thing in the life adventure is to remember when and how did it start. First impressions, inspirations and simple steps shape the future. <br />My gaming experience started in mid '90 on my XT with Hercules graphic card and amber screen. I was too young (and I lived on the other side of the iron curtain) to remember Apple II or Commodore computers before. One of the first games I remember from my early childhood was <b>'Prince of Persia'</b> made by <b><a href="http://jordanmechner.com/">Jordan Mechner</a></b>. I played it for almost 12 years before I was able to finish it without cheating (I can still remember <i>'prince megahit'</i> password that enables cheat mode). I'm sure that a lot of you had similar experience. <br /><br />What does this have to do with onGameStart? <br /><img src="http://images.virtualdesign.pl/images/16049ogs4.png" width="430" /><br />Earlier this year I tweeted that HTML5 gamedevs are the new generation of game makers, and like every other 'new generation' we reinvent the same patterns or techniques our older friends implemented 30 years ago. There is no better way to learn, than listen to the real experts. <b>That's why Jordan Mechner, creator of Prince of Persia, will share his experience during this year's Main onGameStart Keynote</b>. <br /><br />During two days of the conference it will be also possible to listen to presentations of the biggest, most talented and most respected HTML5 game developers from all over the world. And differently from last year, we will focus on <b>real HTML5 games</b>, <b>tools</b> that could help you write your own game, and wide variety of <b>services</b> for distribution, payments, statistics, and everything you will need to create great game. <b>No more tech demos or examples</b> - we all know that HTML5 has become mature enough, and players don't care about the technology - they want games. And we need those players and those games to prove that Open Web Technologies can compete with any other technology used in game development. <br /><br />First part of confirmed speakers list for this year's edition of the first HTML5 game conference:<br/><b><a href="http://twitter.com/#%21/seb_ly">Seb Lee-Delisle</a></b>, trainer on CreativeJS workshops<br /><b><a href="http://twitter.com/#%21/jerome_etienne">Jerome Etienne</a></b>, creator of learningthreejs.com and tQuery<br /><b><a href="http://twitter.com/#%21/swingpants">Jon Howard</a></b>, responsible for games for kids in BBC<br /><b><a href="http://twitter.com/#%21/mapagella">Andres Pagella</a></b>, creator of Tracy and author of <i>"Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript"</i><br /><b><a href="http://twitter.com/#%21/ard">Szymon Pilkowski</a></b>, former senior JS developer in Crytek &amp; Bigpoint<br /><b><a href="http://twitter.com/#%21/blackmoondev">Robert Podgorski</a></b>, boss of Black Moon Dev, one of the best pixel artists ever<br /><b><a href="http://twitter.com/#%21/29a_ch">Jonas Wagner</a></b>, author of great WebGL demos<br />And of course last but not least, <br /><b><a href="http://twitter.com/#%21/jmechner">Jordan Mechner</a></b>, creator of Prince of Persia <br /><br /><img src="http://images.virtualdesign.pl/images/29546ogs3.png" style="float: right; width: 220px; margin-left: 5px; margin-bottom: 5px" />So about 30 seconds ago we have launched our site, <a href="http://ongamestart.com/">onGameStart.com</a>. And because it's all about gaming, we've simply created a game with outstanding graphics by <a href="http://blackmoondev.com/">Robert</a>. Control little astronaut with arrow keys, use space to talk to the speakers (close the window with 'z'), avoid <a href="http://media.tumblr.com/tumblr_lxpncjCigs1qmi6ix.jpg">lasers</a> and spikes, and use keycards to open the door. If you don't want to explore our oGS spaceship, you can simply click on the head of the speaker in the top menu, and you will be teleported to the given speaker - you can still talk with him using space. game was created using <a href="http://twitter.com/#%21/phoboslab">Dominic's</a> <a href="http://impactjs.com">ImpactJS</a> so it should work in most of the browsers. If you happen to find a bug, typo etc, feel free to tweet me about that (<a href="http://twitter.com/michalbe">@michalbe</a>). Enjoy, and stay tuned (<a href="http://lanyrd.com/2012/ogs12/">Lanyrd</a>, <a href="http://www.facebook.com/onGameStart">Facebook</a> & <a href="http://twitter.com/#!/ongamestart">Twitter</a>)! We will announce more speakers and surprises soon.<br/><a href="http://twitter.com/#!/jmechner/status/202518150124802048"><img src="http://images.virtualdesign.pl/images/77471jmechner.png" width="430" /></a>http://michalbe.blogspot.com/2012/05/ongamestart-2012.htmlnoreply@blogger.com (MichalBe)10tag:blogger.com,1999:blog-2037107846963035846.post-665062850438962151Tue, 17 Jan 2012 15:50:00 +00002012-01-17T08:03:32.847-08:00conferenceeventgame developmentjavascriptmeetjsmibbuMeetJS Summit<a href="https://twitter.com/#!/Goracyi/status/158145027984461824" target="_blank"><img src="http://images.virtualdesign.pl/images/975951qdal2.jpg" style="width:150px;margin:5px;float:right"/></a>Last weekend, during <a href="http://summit.meetjs.pl">MeetJS Summit</a> in Poznań, I gave my first talk this year. It was just another great frontend event organized by Godfather of Polish web conferences, <a href="http://ferrante.pl">Damian Wielgosik</a>, together with <a href="http://poznan.gtug.pl/">Polish GTUG</a>.<br />Since <a href="http://technetnepal.net/blogs/ict/archive/2011/11/15/monetization-of-html5-applications-and-games.aspx">ICT Conference in Kathmandu</a> in November, where I spoke for the last time in 2011 (with simple .ppt slides), something really big happened in a web conferences world. Because of <a href="https://github.com/bartaz/impress.js">impress.js</a>, stunning CSS 3D based presentation framework by <a href="https://twitter.com/#!/bartaz">Bartek Szopka</a>, it became inappropriate to use prehistoric tools like PowerPoint for creating your own slides (It has 600 Github watchers more in two weeks than CoffeeScript in more than 2 years, SIC!). And since I had just couple of days before the event, I used mine & <a href="http://twitter.com/sasklacz">Jakub Siemiątkowski's</a> port of <a href="https://twitter.com/#!/jmechner">Jordan Mechner's</a> Prince of Persia as a base of my presentation. I'm quite satisfied with the result, you can check it <a href="http://vdlabs.com/meetjs/">HERE</a> or just click on the iframe below. It is optimized for my presentation remote so you can change the slides only using PgDown & PgUp. Sometimes it needs to be refreshed, and sometimes it craches, but it's more like a prove of concept, not real life product.<br /><iframe width="440" height="280" src="http://vdlabs.com/meetjs/"></iframe>http://michalbe.blogspot.com/2012/01/meetjs-summit.htmlnoreply@blogger.com (MichalBe)1tag:blogger.com,1999:blog-2037107846963035846.post-6568932798552747358Sun, 26 Jun 2011 15:10:00 +00002011-06-26T08:24:13.938-07:00animationbadacss3mibbuNO_MODIFICATION_ALLOWED_ERR: DOM Exception 7Since <a href="https://github.com/michalbe/mibbu">Mibbu framework</a> supports CSS animations, it's good moment to create version exclusively for mobile devices, without using heavy and hard to render canvas, and with very limited JavaScript DOM interactions - CSS FTW! So I remove about 50% of code from original branch and test it on my Samsung Wave (bada has one of the best mobile browsers ever, so that was my starting point). And it simply doesn't work:<br /><img src="http://img221.imageshack.us/img221/4716/nma.png" width="430" alt="NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7" title="NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7"/><br />After short research I saw that <a href="http://www.google.com/support/forum/p/Chrome/thread?tid=59e8746723622119&hl=pl">Allegro ('Polish Ebay') had the same problem on Desktop Chrome</a> months ago. After couple more hours of reading documentation I found a clue, that Webkit is freaking out if you try to put HTML content into style tag. So I switch <pre name="code" class="js">var cssStyle = document.createElement('style');<br /> cssStyle.innerHTML = 'body { color: #000; }';</pre>to <pre name="code" class="js">var cssStyle = document.createElement('style');<br /> cssStyle.innerText = 'body { color: #000; }';</pre>and everything works.http://michalbe.blogspot.com/2011/06/nomodificationallowederr-dom-exception.htmlnoreply@blogger.com (MichalBe)7tag:blogger.com,1999:blog-2037107846963035846.post-6921547831191072280Fri, 24 Jun 2011 14:53:00 +00002011-06-24T07:59:43.347-07:00animationcss3demoeventtutorialFew words about my CSS Nyan CatLast week Mozilla together with Finnish demoscene hackers organized Flame Party in capital of Finland, Helsinki. More than 100 participants worked whole day on outstanding web demos in two main categories - Single Effect and Main Demo.<br /><a href="http://www.flickr.com/photos/tobimcfly/5854093539/in/photostream/"><img src="http://farm3.static.flickr.com/2749/5854093539_551d141672.jpg" width="430" /></a>Because of nearly release of stable <a href="http://www.mozilla.com/en-US/firefox/all.html">Firefox 5</a>, first Mozilla's browser with CSS3 Animation support, I decide to create CSS3 demo for the Single Effect Compo.<br />Since I really enjoy all that 4chan-like mems stuff, I chose Nyan Cat, as one of the most 'fresh' ones. In case you don't know it (check the progress bar!):<br /><iframe width="425" height="349" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen></iframe><br /><br />I didn't use any graphics to code my <a href="https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat">CSS Nyan Cat</a>. It is completely drawn and animated in CSS. The 'pop-tart' body is created with two rounded cornered divs and big, pink dots separated with non-breaking spaces:<pre name="code" class="js">#toastBody {<br /> background-color:#fad695;<br /> width:100px;<br /> height: 70px;<br /> border: solid #000 5px;<br /> border-radius: 15px;<br /> padding: 2px;<br /> position:absolute;<br /> z-index:19;<br />}<br /><br />#toastBody > div {<br /> width:100px;<br /> height:70px;<br /> border-radius: 30px;<br /> background-color: #fc9dff;<br /> display:block;<br /> color: #da3eb9;<br /> font-size: 40px;<br /> line-height: 10px;<br />}<br /></pre>All the animations was declared with <b>@-moz/webkit-keyframe</b> (I wrote <a href="http://michalbe.blogspot.com/2011/05/css3-animations-in-mibbu.html">a lot</a> about this method before). <br /><br />I made couple of unusual things during development. For example, look on the cat's mouth:<br /><br /><img src="http://img405.imageshack.us/img405/1384/nyank.png" width="430"/><br />Yup, it is rotated 'E' letter:<pre name="code" class="js">&lt;div id="mainHead" class="skin"&gt;<br /> &lt;div class="mouth"&gt;E&lt;/div&gt;<br />&lt;/div&gt;<br /><br />.mouth {<br /> position: absolute;<br /> -moz-transform: scale(2, 0.7) rotate(-90deg);<br /> -webkit-transform: scale(2, 0.7) rotate(-90deg);<br /> font-family: Arial;<br /> font-size: 25px;<br /> font-weight: bold;<br /> top:9px;<br /> left:37px;<br /> color: #000;<br />}<br /><br /></pre>What about the rainbow behind the cat? I just cropped part of original image, put it into <a href="http://www.colorzilla.com/gradient-editor/">CSS Gradient Editor by ColorZilla</a> (awesome tool BTW, but still without couple of necessary features I use daily; I think I will create something like this on my own), which generates me css gradient ready for pasting into the div background:<pre name="code" class="js">.rainbow {<br /> position:absolute;<br /> width:45px;<br /> height:90px; <br /> background: -moz-linear-gradient (top, #d91a12 15%, #e13300 15%, #ff7f14 16%, #f2ab03 32%, #ebc000 32%, #fade00 33%, #efff03 48%, #56fc02 49%, #52ff01 66%, #4ade7e 67%, #3baaf2 67%, #3baaf2 84%, #7337f7 84%, #6b40f2 100%);<br />}</pre>The most annoying thing was the star. Animated stars in the background are made up from 8 animated elements. I google "nyan cat sprite" and found all the star frames <a href="http://i1037.photobucket.com/albums/a453/DryBowser455/th_NyanCatSprite.png?t=1304659408">[like this]</a>. The only way to animate it was pixel-perfect animation of each of 8 divs. It took me really lot of time:<pre name="code" class="js">@-moz-keyframes star1 {<br /> 0% { top: 0; height: 5px;}<br /> 33.19% { top: 0; height: 5px; }<br /> 33.2% { height:10px; top:0; }<br /> 49.79% { height:10px; top:0; }<br /> 49.8% { height:10px; top:5px; }<br /> 66.39% {height:10px; top:5px; }<br /> 66.4% { height:5px; top:10px;}<br /> 82.99% { height:5px; top:10px;}<br /> 83% { height: 5px; top: 15px; }<br /> 99.99% { height: 5px; top: 15px; }<br /> 100% { top: 0; height: 5px; }<br />}<br /><br />@-moz-keyframes star2-3-6-7 {<br /> 0% { visibility: hidden; }<br /> 16.59% { visibility: hidden; }<br /> 16.6% { visibility: visible; }<br /> 33.19% { visibility: visible; }<br /> 33.2% { visibility: hidden; }<br /> 100% { visibility: hidden; }<br />}<br /><br />@-moz-keyframes star4 {<br /> 0% { left: 0; width: 5px; visibility: visible;}<br /> 33.19% { left: 0; width: 5px; }<br /> 33.2% { width:10px; left:0; }<br /> 49.79% { width:10px; left:0; }<br /> 49.8% { width:10px; left:5px; }<br /> 66.39% {width:10px; left:5px; }<br /> 66.4% { width:5px; left:10px;}<br /> 82.99% { width:5px; left:10px;}<br /> 83% { width: 5px; left: 15px; visibility:hidden;}<br /> 99.99% { width: 5px; left: 15px; visibility:hidden;}<br /> 100% { left: 0; width: 5px; visibility:hidden;}<br />}<br /><br />@-moz-keyframes star5 {<br /> 0% { left: 38px; width: 5px; visibility: visible;}<br /> 33.19% { left: 38px; width: 5px; }<br /> 33.2% { width:10px; left:33px; }<br /> 49.79% { width:10px; left:33px; }<br /> 49.8% { width:10px; left:28px; }<br /> 66.39% {width:10px; left:28px; }<br /> 66.4% { width:5px; left:28px;}<br /> 82.99% { width:5px; left:28px;}<br /> 83% { width: 5px; left: 15px; visibility:hidden;}<br /> 99.99% { width: 5px; left: 15px; visibility:hidden;}<br /> 100% { left: 0; width: 5px; visibility:hidden;}<br />}<br /><br />@-moz-keyframes star8 {<br /> 0% { top: 32px; height: 5px; visibility:visible;}<br /> 33.19% { top: 32px; height: 5px; }<br /> 33.2% { height:10px; top:28px; }<br /> 49.79% { height:10px; top:28px; }<br /> 49.8% { height:10px; top:23px; }<br /> 66.39% {height:10px; top:23px; }<br /> 66.4% { height:5px; top:18px;}<br /> 82.99% { height:5px; top:18px;}<br /> 83% { height: 5px; top: 15px; visibility:hidden;}<br /> 99.99% { height: 5px; top: 15px; visibility:hidden;}<br /> 100% { top: 0; height: 5px; visibility:hidden;}<br />}<br /><br />.star {<br /> position: absolute;<br /> width: 40px;<br /> height: 40px;<br /> z-index: 10;<br />}<br /><br />.star div {<br /> width: 5px;<br /> height: 5px;<br /> background-color: #fff;<br /> position: absolute;<br /> -moz-animation: star1 0.4s linear 0s infinite;<br /> -webkit-animation: star1 0.4s linear 0s infinite;<br />}</pre><a href="https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat"><img src="http://images.virtualdesign.pl/images/375991308881152_screenshot_1.png.jpg" width="430" /></a><br />Here is the final result of everything: <a href="https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat">CSS NYAN CAT</a>, and <a href="https://github.com/michalbe/css-nyan-cat">Github repo</a>.<b> If you like it, don't forget to click "I like it" on Mozilla's page!</b>http://michalbe.blogspot.com/2011/06/few-words-about-my-css-nyan-cat.htmlnoreply@blogger.com (MichalBe)17tag:blogger.com,1999:blog-2037107846963035846.post-7598869406055153211Thu, 09 Jun 2011 13:23:00 +00002011-06-09T08:07:42.187-07:00game developmentmozillaworkshopsThe Flame Party Helsinki<img src="http://images.virtualdesign.pl/images/63859demoparty_the_flame_party_logo1.png" width="430"><br />If you are planning to spend next weekend in Finland, you cannot omit <a href="http://mozillalabs.com/demoparty/helsinki">Flame Party</a> organized there by <a href="http://mozillalabs.com/demoparty">Mozilla</a>, <a href="http://www.altparty.org/2011/">Alternative Party Crew</a> and <a href="http://dot.ayy.fi/index.php?s=dot&p=9">DOT</a>. It will be awesome weekend full of coding, BBQ, free drinks, Finish saunas and outstanding workshops including one lead by my - <b>"Dive into HTML5 Animation"</b>:<br /><blockquote>"During the workshop you will learn about different methods of animation in JavaScript. We will compare the performance and ease of it's implementation in various browsers on different devices. Are we condemned to use DOM? What about new CSS techniques? Or maybe canvas is future of the web games?"</blockquote><br />So what are you waiting for? <a href="http://www.fläbät.fi/event/010c7910/">Register now</a> and follow the party on <a href="http://lanyrd.com/2011/the-flame-party-helsinki/">Lanyrd</a> and <a href="http://www.facebook.com/event.php?eid=208867699145074">Facebook</a>.http://michalbe.blogspot.com/2011/06/flame-party-helsinki.htmlnoreply@blogger.com (MichalBe)4tag:blogger.com,1999:blog-2037107846963035846.post-2513665403475344219Sun, 05 Jun 2011 14:54:00 +00002011-06-05T11:30:41.325-07:00animationgame developmentmibbuCSS Animation in FirefoxMibbu now supports CSS Animations also in Firefox. The only version in which I have tested it is 5.0/Beta, but I think it should works also in Aurora. Feature detection problem <a href="http://michalbe.blogspot.com/2011/05/css3-animations-in-mibbu.html">I describe last week </a>wasn't the only unexpected behavior during implementing this (BTW, I want to thanks Anonymous guy who corrects my attempt - <a href="http://michalbe.blogspot.com/p/contact-me.html">contact me</a>, I have only your IP & Country you were writing from:), and <a href="http://paulirish.com/">Paul Irish</a> for deeper explanation of the problem).<br /><img src="http://images.virtualdesign.pl/images/71715Zrzutekranu2011-06-05(godz.16.03.34).png" width="430"/><br />Every animation I've created using Mibbu in Firefox animate only once. No matter if I put 'infinite' as a value of AnimationIterationCount. Using <a href="http://www.w3.org/TR/css3-animations/#the-animation-shorthand-property-">MozAnimation shorthand property</a> doesn't want to work. I rewrote everything couple of times in different ways without any result (sometimes it just stop working also on webkit:)). And then I figure out that setting 'none' as 'MozAnimationDelay' instead of 0 (<a href="http://www.w3.org/TR/css3-animations/#the-animation-delay-property-">as in the spec!</a>) solves everything. Nice try Mozilla, but it is again 1:0 for me:). I really love everything from Mozilla, Firefox is my main browser, each day I'm working with technologies created there (also in my full time job in GaduGadu), I'm excited in every news like <a href="http://twitter.com/#!/marcoos/status/77372844971003905">THIS ONE</a>, and I even ran <a href="https://developer.mozilla.org/en/XUL">XUL</a> workshop two weeks ago <a href="http://falsyvalues.com/speakers.html#litman-budzynski">on FalsyValues conference</a>. But sometimes I simply don't understand why they solve something in such a weird way.<br />I also had to use MozAnimation attribute using brackets notation because Closure Compiler don't understand it and minimized it to the single letter. <br />So, you can now <a href="https://github.com/michalbe/mibbu">download Mibbu from my Github account</a> and play with it.<br /><br /><a name="update">UPDATE</a><br />Ok, thanks to <a href="http://blog.marcoos.com/">Marek Stepien's</a> research done after my post we figured out that putting delay value without the unit ('0' instead of '0s') solves the problem. Probably, when we put single digit without units, Firefox thought that it is -animation-iteration-count (the only property without any units). Marek creates bug report for this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=662171">here</a>.http://michalbe.blogspot.com/2011/06/css-animation-in-firefox.htmlnoreply@blogger.com (MichalBe)2tag:blogger.com,1999:blog-2037107846963035846.post-4459063645831278242Mon, 30 May 2011 23:03:00 +00002011-05-30T16:03:44.026-07:00conferenceongamestartonGameStart ticketsIt is now possible to register to <a href="http://ongamestart.com ">onGameStart</a> - first HTML5 game conference. Don't wait for anything, just go to <a href="http://ongamestart.com ">http://ongamestart.com</a> and do what you have to do:).<br/><br/><img width="430" src="http://images.virtualdesign.pl/images/69782Zrzutekranu2011-05-31(godz.00.31.12).png" />http://michalbe.blogspot.com/2011/05/ongamestart-tickets.htmlnoreply@blogger.com (MichalBe)3tag:blogger.com,1999:blog-2037107846963035846.post-3560509714856575729Sun, 29 May 2011 22:07:00 +00002011-05-29T15:20:09.045-07:00animationcss3frameworksgame developmentmibbuongamestartCSS3 animations in MibbuLast week <a href="http://twitter.com/#!/michalbe/status/72435732635070464">I implement CSS Animations</a> in my gamedev micro framework, <a href="http://mibbu.eu/">Mibbu</a>.<br />It is possible now to animate sprites in three different ways - cropping parts of the sprite with .drawImage() in 'canvas mode', manipulating 'top' & 'left' attributes of absolute position of the image [<a href="http://michalbe.blogspot.com/2010/10/four-methods-of-javascript-animation.html">both described in here</a>] and CSS Animation in DOM mode.<br />For now Mibbu supports CSS animations only in webkit based browsers. I know that beta version of Firefox supports it as well, but I didn't find easy way to detect it. In webkit we can just check what is the initial value of given attribute (use whatever DOM element you want), like this:<br /><pre name="code" class="js">if (typeof document.body.style.webkitAnimation !== "undefined") {<br />//all your animation are belong to us<br />} else {<br />//no css animations:(<br />}<br /></pre>Unfortunately it don't work in Aurora, mozAnimation always return 'undefined'. Is there any way to easy detect it?<br /><br />The main point in creating css animations is preparing proper keyframes in a css classes and connecting it to the DOM elements with description parameters like duration or number of iterations. CSS engine will be responsible for sprite animation so draw() function of each sprite object should be empty. The keyframes are generated during constructing the object and append to the document - one class in one script element, it will be easier to edit them when the parameters of the animation will change during the gameplay. I also wrote a little function to convert speed of an animation (from Canvas & DOM mode) to the CSS Animation Duration parameter.<br /><pre name="code" class="js">var calculateSpeed = function(speed, frames) {<br /> return (~~((1 / (60 / speed)) * 100) / 100) * (frames+1);<br />};<br /><br />constructAnimationClass = function(){<br /> var animClass = "@-webkit-keyframes 's" + t.id + "' {\n",<br /> step = 100 / (t.fs + 1),<br /> str = '% { -webkit-transform: translate(';<br /><br /> for (var q = 0; q < t.fs+1; q++) {<br /> animClass += ~~((step * q) * 100) / 100 + str + t.animation * t.width*-1 + 'px,' + q * t.height * -1 + 'px); }\n';<br /> animClass += ~~((step * (q + 1) - 0.01) * 100) / 100 + str + t.animation * t.width * -1 + 'px,' + q * t.height * -1 + 'px); }\n';<br /> }<br /> <br /> return animClass += '100'+ str +t.animation*t.width+'px, 0px); }\n}';<br /> <br />};<br /><br />//append created class to the document<br />t.animStyle = document.createElement('style');<br />t.animStyle.innerHTML = constructAnimationClass();<br />document.body.appendChild(t.animStyle);<br /></pre>Above code creates class like this: <a href="http://images.virtualdesign.pl/images/94494Zrzutekranu2011-05-29%28godz.23.30.29%29.png"><img src="http://images.virtualdesign.pl/images/94494Zrzutekranu2011-05-29%28godz.23.30.29%29.png" width="490"/></a>And every sprite needs to implement description of the animation (name is created by concatenating 's' and internal id of the sprite: <pre name="code" class="js">t.style.webkitAnimation = "'s"+t.id+"' "+calculateSpeed(t.speed, t.fs)+"s linear 0 infinite";<br /></pre>Main problem I had with implementing this was pausing the game - even if main loop stops, CSS engine still animates the keyframes. So I just set '0' for the -webkit-animaition-duration parameter: <pre name="code" class="js">'off': function(){<br /> MB_Stop();<br /> if (MB_usingCSSAnimations){<br /> var i = MB_elements.length;<br /> for (;i--;){<br /> if (MB_elements[i].image)<br /> MB_elements[i].image.style.webkitAnimationDuration = 0;<br /> }<br /> }<br />};<br /></pre>It sucks but it works. Anyone know better solution? Next step is to provide support of webkitAnimationIterations for iteration's callbacks (now it is calculated using JavaScript, not with the events, but contrary to what I thought webkit has already supported DOM events for animation [thanks <a href="http://twitter.com/#!/askoth">Askoth</a>]). If you want help feel free and contribute: <a href="https://github.com/michalbe/mibbu">Mibbu on github</a>. There are also <a href="https://github.com/michalbe/mibbu/issues?sort=created&direction=desc&_pjax=true&state=open">some issues</a> I found creating new features and I have no time to fix it now. If you use <a href="http://mibbu.eu/">Mibbu</a> and have some ideas or found any bugs, write me about it or fork & pull request on <a href="https://github.com/michalbe/mibbu">Github</a>.<br/><br/>BTW, Github will be one of the sponsors of <a href="http://ongamestart.com/">onGameStart, HTML5 Game Conference</a>. We will open registration on Monday evening Central European time, so check <a href="http://ongamestart.com/">the conference page</a> and don't miss it!http://michalbe.blogspot.com/2011/05/css3-animations-in-mibbu.htmlnoreply@blogger.com (MichalBe)8tag:blogger.com,1999:blog-2037107846963035846.post-5683304703850561628Thu, 05 May 2011 00:46:00 +00002011-05-04T18:04:09.010-07:00frameworksgamegame developmentmibbuMibbu - javascript html5 game framework<img src="http://images.virtualdesign.pl/images/69143mibbu.jpg" style="float:right;margin-left:12px;width:200px" />I have just published initial release of <a href="http://mibbu.eu/">Mibbu</a> - my javascript microframework for fast game prototyping. To be honest - it is just set of functions and patterns I use always when I write my games. It is more a sandbox, starting place with basic tools, than a real framework (that's why I called it 'microframework'). It provides sprite animations, basic operations like movement or collisions, scrolling backgrounds and drawing on both - canvas or DOM. It uses DOM only when it is not possible to use Canvas (like in older IEs), but you can force it to do so with one single function (<b><a href="http://mibbu.eu/#canvasOff">canvasOff()</a></b>) - then it will be drawn with divs & imgs. It is the same mechanics I have used in <a href="http://openodyssey.mibbu.eu/">OpenOdyssey</a> or <a href="https://developer.mozilla.org/pl/demos/detail/janpu">Janpu</a>. I will try to write something more about using <a href="https://github.com/michalbe/mibbu">Mibbu</a> later this week.http://michalbe.blogspot.com/2011/05/mibbu-javascript-microframework-for.htmlnoreply@blogger.com (MichalBe)9tag:blogger.com,1999:blog-2037107846963035846.post-5600770428854688429Sat, 30 Apr 2011 10:15:00 +00002011-04-30T12:07:12.454-07:00eventgamedevelopmentgamesongamestartFirst HTML5 Game Conference ever - onGameStartAs probably most of you already know - I'm organizing first HTML5 game conference ever. It will take place in my hometown - <a href="http://en.wikipedia.org/wiki/Warsaw">Warsaw</a> at 22nd & 23rd of September 2011. I've done my best with selection of the speakers - so far it is the only chance to meet and talk with the best Open Web Game developers. Let me introduce some of them:<br /><b><a href="http://www.everyday3d.com/">Bartek Drozd</a></b> - creator of <a href="https://github.com/drojdjou/J3D">J3D</a> - WebGL Library with Unity3d object/scene exporter.<br /><b><a href="http://www.rawkes.com/">Rob Hawkes</a></b> - author of <a href="http://www.amazon.co.uk/gp/product/1430232919/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag=rawkes-21&linkCode=as2&camp=1634&creative=6738&creativeASIN=1430232919">"Foundation HTML5 Canvas"</a> book<br /><b><a href="http://agent8ball.com/">Robby Ingebretsen</a></b> - creator of Agent008Ball<br /><b><a href="http://blog.tojicode.com/">Brandon Jones</a></b> - author of <a href="http://code.google.com/p/glmatrix/">glMatrix</a> library and a lot of awesome webGL demos (like <a href="http://media.tojicode.com/q3bsp/">Quake III</a>)<br /><b><a href="http://www.martinkool.com/">Martin Kool</a></b> - creator of multiplayer, online versions of old good Sierra games - <a href="http://sarien.net">Sarien</a><br /><b><a href="http://sethladd.com/">Seth Ladd</a></b> - Google developer advocate (he will speak on <a href="http://www.google.com/events/io/2011/sessions_schedule.html">Google IO</a> in two weeks - don't miss it!)<br /><b><a href="http://nekapuzer.at/">Simon Oberhammer</a></b> - creator of pyGame port for Javascript - GameJS<br /><b><a href="http://www.freeciv.net/">Andreas Røsdal</a></b> - originator of biggest strategy game made in open web technologies based on Sid Mayer's Civilization - Freeciv.net<br /><b><a href="http://www.phoboslab.org/">Dominic Szablewski</a></b> - creator of ImpactJS - most complex and so far the best Javascript game engine.<br /><br />For more information about the conference check our <a href="http://ongamestart.com/">site</a>, <a href="http://lanyrd.com/2011/ongamestart/">lanyrd</a>, <a href="http://twitter.com/#!/onGameStart">twitter</a> and <a href="http://www.facebook.com/onGameStart">facebook</a>. And don't forget to preregister (it is possible on the site).<br /><a href="http://ongamestart.com"><img src="http://img825.imageshack.us/img825/3203/ogse.jpg" width="430" /></a>http://michalbe.blogspot.com/2011/04/first-html5-game-conference-ever.htmlnoreply@blogger.com (MichalBe)3tag:blogger.com,1999:blog-2037107846963035846.post-4523115796256919812Sun, 10 Apr 2011 09:47:00 +00002011-04-23T00:54:21.299-07:00eventfacebookgadugadugame developmentgamesjavascriptworkshopsGG WorkshopYesterday I ran Javascript workshop about creating Apps & Games in Social Networks. Fourteen great developers in eight hours tried to create multiplayer checkers (draughts? what's the difference?) game and adapt it to two social network APIs (<a href="htp://facebook.com">Facebook</a> & <a href="http://gg.pl">GG.pl</a>). I published source code of the final result <a href="https://github.com/michalbe/szkolenieGG">on my Github</a>, just as <a href="https://github.com/narfdotpl/gg-checkers">Maciej Konieczny</a>, one of the participants. Here are also my slides and couple of photos:<br /><br /><div style="width:425px" id="__ss_7576298"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/michalbu/gg-workshop-games-apps-in-javascript" title="GG WORKSHOP GAMES &amp; APPS IN JAVASCRIPT">GG WORKSHOP GAMES &amp; APPS IN JAVASCRIPT</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/7576298" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/michalbu">michalbu</a> </div></div><br /><a href="http://img696.imageshack.us/g/obraz013f.jpg/"><br /><img src="http://img684.imageshack.us/img684/3772/obraz013r.png" /><br /><img src="http://img808.imageshack.us/img808/10/obraz021.png" /><br /><img src="http://img695.imageshack.us/img695/4387/obraz029g.png" /><br /><img src="http://img852.imageshack.us/img852/1110/obraz036.png" /><br /><img src="http://img811.imageshack.us/img811/6385/obraz037.png" /></a><br />I would like to thanks everyone for the presence and I hope we will meet on frontend meetings in near future (like those organized by <a href="http://googlepolska.blogspot.com/2011/04/deweloperzy-spotkajmy-sie.html">Google Poland</a>). If you will find some free time feel free to rate my workshop <a href="http://speakerrate.com/michalbe"> on SpeakerRate</a>.http://michalbe.blogspot.com/2011/04/gg-workshop.htmlnoreply@blogger.com (MichalBe)2tag:blogger.com,1999:blog-2037107846963035846.post-4001594580848575394Tue, 29 Mar 2011 10:33:00 +00002011-03-29T04:08:21.185-07:00otherSun^26<img src="http://img191.imageshack.us/img191/1296/oursun.gif" style="float:left;width:150px;margin-right:10px;"/>That post has nothing in common with programming or even computers but I was so excited when I discover things I want to write about that 140 chars of twitter wasn't enough for me. <br/><br />The Sun is a star in the center of our Solar System Anyone knows that. But have you ever think about number '<span style="font-weight:bold;">26</span>' in Sun statistics? <br /><ul><li>Apparent magnitude of the Sun is -<span style="font-weight:bold;">26</span>,8</li><li>Mean distance from Milky Way <span style="font-weight:bold;">26</span>,000ly</li><li>Galactic period 2<span style="font-weight:bold;">26</span>.000.000 years</li><li>Radiant flux 3,827×10^<span style="font-weight:bold;">26</span> W</li><li>Unicode of Sun symbol - <span style="font-weight:bold;">26</span>09</li><li>Distance from Milky Way Equator - <span style="font-weight:bold;">26</span>ly</li><li>Speed <span style="font-weight:bold;">26</span>0 km/s<li><li>Conversion rate of mass-energy 4.<span style="font-weight:bold;">26</span> million metric tons per second</li><li>Mean mass loss in energy <span style="font-weight:bold;">26</span>,732MeV</li><li>Total mass loss 6,5x10^<span style="font-weight:bold;">26</span></li><li>STEREO observation mission starts at <span style="font-weight:bold;">26</span>th of October <span style="font-weight:bold;">2</span>00<span style="font-weight:bold;">6</span></li></ul><br />Coincidence? Don't think so! :)<br /><br /><span style="font-style:italic;">from <a href="http://pl.wikipedia.org/wiki/S%C5%82o%C5%84ce">Polish</a> & <a href="http://en.wikipedia.org/wiki/Sun">English</a> Wikipedia.</span>http://michalbe.blogspot.com/2011/03/sun26.htmlnoreply@blogger.com (MichalBe)2tag:blogger.com,1999:blog-2037107846963035846.post-1276032602632986949Sat, 19 Mar 2011 17:12:00 +00002011-03-19T11:31:00.213-07:00eventjavascriptmeet.js in WarsawI have just returned from Warsaw edition of <a href="http://jsnews.pl/">meet.js</a>, polish javascript meeting organized by <a href="http://ferrante.pl/">Damian Wielgosik</a> and <a href="http://czerski.info/">Paweł Czerski</a>, organizers of <a href="http://front-trends.com/">FrontTrends</a> and <a href="http://falsyvalues.com/">Falsy Values</a>. During the meeting we ware able to watch four Javascript tech-talks.<br /><img src="http://images.virtualdesign.pl/images/79366roberttomaszewski.png" />First was Robert Tomaszewski from <a href="http://www.hypermediaisobar.pl/">Hypermedia Isobar</a> with his presentation about different context of calling Js structures. He started with a little of JS history, then explained basics of using 'this' depending on placement of the objects and different approaches of using 'this' in DOM events.<br /><img src="http://images.virtualdesign.pl/images/5248marekstepien.png" width="430"/> Next was <a href="http://blog.marcoos.com/">Marek Stepień</a> - lead of <a href="http://www.aviary.pl/">Aviary.pl</a>, team of programmers and translators localizing open source software for Polish users. He started with review of past JS objects, its restrictions and methods of its elimination. Then he presented new methods of creating objects in Js 1.8.5 like defineProperty() etc. <br /><img src="http://images.virtualdesign.pl/images/76543tomasztunik.png" widh="430"/>After the break there were a little contest - I won weekend stay in <a href="http://en.wikipedia.org/wiki/Karpacz">Karpacz</a> for my implementation of adding function (Thanks!:) ). Just after that <a href="http://twitter.com/#!/I_am_thomas">Tomasz Tunik</a> talked about his <a href="http://provoke.it/einie/">Einie framework</a>. He showed a lot of cool examples (like mouse tracking and interactions with canvas objects, or <a href="http://scorch.duostack.net/">Pew! Pew! Towers</a>, game created in 48h by Thomas and <a href="http://twitter.com/#!/ard">Szymon Pilkowski</a> on <a href="http://html5gamejam.org/">HTML5gameJam in Paris</a>. All of that examples are published on <a href="http://provoke.it/einie/">Einie's site</a> so don't hesitate to check it.<br /><br />Last presentation was made by me. I was talking about pseudorandom numbers and <a href="http://en.wikipedia.org/wiki/Steganography">Steganography</a>. I won't describe my talk, maybe someone else will, I think in couple of days I will publish it as a blog post or maybe little JS library. <br />I want to thanks the organizers one more time, and I hope we will meet on the next meet.js (or at least on Falsy Values:) ).http://michalbe.blogspot.com/2011/03/meetjs-in-warsaw.htmlnoreply@blogger.com (MichalBe)2tag:blogger.com,1999:blog-2037107846963035846.post-3485191368091356825Thu, 03 Mar 2011 21:42:00 +00002011-03-03T13:42:30.309-08:00BirthdayMy blog is one year old today.<br /><img src="http://images.virtualdesign.pl/images/792461st-birthday-cake.jpg" width=430 />I will try to write some summary of that period later this week or at the beginning of the next one. For sure one of the best things I wrote about was my <a href="http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html">HTML5 Canvas Game Tutorial</a>, one of the most popular in all over the web, but there were also other posts I would like to remind.http://michalbe.blogspot.com/2011/03/birthday.htmlnoreply@blogger.com (MichalBe)0tag:blogger.com,1999:blog-2037107846963035846.post-8500066220203866749Sun, 27 Feb 2011 12:21:00 +00002011-02-27T10:45:24.075-08:00animationcss3gamedevCSS3 sprite animation, issues in SafariTogether with CSS3 standard we get <a href="http://www.w3.org/TR/css3-animations/">awesome tool for creating hardware accelerated css-only animated sprites</a>. For now it is implemented only in webkit based browsers like Safari, Chrome or most of the mobile browsers. <a href="http://paulbakaus.com/2010/12/07/finally-sprite-animations-implemented-via-css3-animations/">Paul Bakaus</a> described it on his blog months ago, <a href="http://paulbakaus.com/2010/12/15/sprite-animations-on-css-transitions-revisited/">with additional approaches and performance optimization methods</a>. Also <a href="http://twitter.com/m4r00p">Marek Pawlowski</a> said a lot about this <a href="http://devmeetings.pl/trainings/programowanie-gier-w-javascript">on his DevMeeting gamedev workshop</a>. Working on my new mobile game, I've tested everything I could find all over web. And some of the examples (<a href="http://paulbakaus.com/lab/css/animated_sprite_css3_revisited/">like that Paul's created with Doug Neiner</a>) did not works on Safari and some mobiles (like Samsung's Dolfin on my bada Wave). I spend couple of annoying hours to figure out what happens, analyzing different use cases, different examples and documentation pages. But solution was simple as hell: <blockquote><b>Safari and some of mobile browsers cannot animate any element with CSS3 animation if there is no '0%' and '100%' step.</b></blockquote>That's why example from Paul's blog didn't want to work when I test them:<pre name="code" class="js">@-webkit-keyframes 'animationName' {<br /> 0% { background-position: 0px 0px; }<br /> 12.5% { background-position: -128px 0px; }<br /> 25% { background-position: -256px 0px; }<br /> 37.5% { background-position: -384px 0px; } <br /> 50% { background-position: -512px 0px; }<br /> 62.5% { background-position: -640px 0px; }<br /> 75% { background-position: -768px 0px; }<br /> 87.5% { background-position: -896px 0px; }<br />}</pre>Adding the last frame, with the same parameters as the first one, fixes the problem:<pre name="code" class="js">@-webkit-keyframes 'animationName' {<br /> 0% { background-position: 0px 0px; }<br /> 12.5% { background-position: -128px 0px; }<br /> 25% { background-position: -256px 0px; }<br /> 37.5% { background-position: -384px 0px; } <br /> 50% { background-position: -512px 0px; }<br /> 62.5% { background-position: -640px 0px; }<br /> 75% { background-position: -768px 0px; }<br /> 87.5% { background-position: -896px 0px; }<br /> 100% { background-position: 0px 0px; }<br />}</pre>Of course I didn't want to show that Paul and other guys was wrong - for sure all of them has bigger experience and knowledge than me. And their solutions will eventually work when browsers will implement the standards (what was the point I supposed) - but I was looking for something what will work here and now.<br /><img src="http://images.virtualdesign.pl/images/50726a.png" style="width:430px;" />http://michalbe.blogspot.com/2011/02/css3-sprite-animation-safari-issue.htmlnoreply@blogger.com (MichalBe)9tag:blogger.com,1999:blog-2037107846963035846.post-3958924498152419536Thu, 24 Feb 2011 00:53:00 +00002011-04-14T01:22:34.460-07:00algorithmjavascriptrandom numbertutorialJavascript random numbers with custom seed - part 2<img src="http://img715.imageshack.us/img715/1192/89994001.jpg" style="width:120px;float:right;margin-left:10px" />Generator created in previous example was able only to create integer numbers from zero to the given maximum (2^50) using provided seed. But in most cases we need random numbers from some range, so lets modify previous example and add 'min' and 'max' arguments to the .next() method. Also, to make it more like the native Math.rand(), let's make it generating floats from 0 to 1.<pre name="code" class="js">var CustomRandom = function(nseed) { <br /> <br /> var seed, <br /> constant = Math.pow(2, 13)+1, <br /> prime = 1987, <br />//any prime number, needed for calculations, 1987 is my favorite:) <br /> maximum = 1000; <br />//maximum number needed for calculation the float precision of the numbers (10^n where n is number of digits after dot) <br /> if (nseed) { <br /> seed = nseed; <br /> } <br /> <br /> if (seed == null) { <br />//before you will correct me in this comparison, read Andrea Giammarchi's text about coercion http://goo.gl/N4jCB <br /> <br /> seed = (new Date()).getTime(); <br />//if there is no seed, use timestamp <br /> } <br /> <br /> return { <br /> next : function(min, max) { <br /> seed *= constant; <br /> seed += prime; <br /> <br /> <br /> return min && max ? min+seed%maximum/maximum*(max-min) : seed%maximum/maximum; <br />// if 'min' and 'max' are not provided, return random number between 0 & 1 <br /> } <br /> } <br />} </pre>Now its easy to use it in such a way:<pre name="code" class="js">var rng = CustomRandom(23);<br />//use '23' as a seed<br /> rng.next(); // 0.426<br /> rng.next(); // 0.205<br /></pre>In the next part I will show some GameDev related examples of using Random Number Generators with custom seeds.<br /><br /><a href="http://michalbe.blogspot.com/2011/02/javascript-random-numbers-with-custom.html">Check 1st part of the "Javascript random numbers with custom seed" tutorial</a>http://michalbe.blogspot.com/2011/02/javascript-random-numbers-with-custom_23.htmlnoreply@blogger.com (MichalBe)5tag:blogger.com,1999:blog-2037107846963035846.post-909435143995829449Thu, 17 Feb 2011 23:42:00 +00002011-02-24T02:15:17.172-08:00algorithmjavascriptrandom numbertutorialJavascript random numbers with custom seed - part 1<img src="http://images.virtualdesign.pl/images/4712201_dice_color.jpg" width="180" style="margin-right:10px;float:left;" /><b>Introduction</b><br />Any random number generator generates sequences of numbers using some initial seed. The same seed always gives the same sequence. Most popular initialization method is to provide actual timestamp as seed - it changes every second so probability of receiving same sequences is very low. <br /><img src="http://images.virtualdesign.pl/images/81894images.jpg" style="float:right;margin-left:10px;width:100px;" />Generating pseudorandom sequences of numbers has wide variety of uses, ranging from creating random maps for games (with well constructed map generator all the game should remember is just the initial seed, not the array with list of map elements), to <a href="http://en.wikipedia.org/wiki/Steganography">steganography</a>, where you code & decode message on the sample image using the same seed (it is impossible to decode the information from the image without knowing exact number used as seed during coding it). I will create some examples in the next part of the series. <br /><br /><b>First attempt</b><br />Unfortunately, it is impossible to provide custom seed to the Javascript <i>Math.random()</i>. It always uses timesamp for initialization. So let us create our own generator with everything we need.<pre name="code" class="js">var CustomRandom = function(nseed) {<br /><br /> var seed,<br /> constant = Math.pow(2, 13)+1,<br /> prime = 37,<br /> maximum = Math.pow(2, 50);<br /> <br /> if (nseed) {<br /> seed = nseed;<br /> }<br /> <br /> if (seed == null) {<br />//if there is no seed, use timestamp<br /> seed = (new Date()).getTime();<br /> } <br /> <br /> return {<br /> next : function() {<br /> seed *= constant;<br /> seed += prime;<br /> seed %= maximum;<br /> <br /> return seed;<br /> }<br /> }<br />}</pre>And now:<pre name="code" class="js">var rng = CustomRandom(23);<br />//use '23' as a seed<br /> rng.next(); //188476<br /> rng.next(); //1544183905<br /> rng.next(); //12651498733702</pre>In the next parts I will extend that CustomRandom() generator with limits (min and max value) and implement some real-life use cases.<br /><br />Check 2nd part of the tutorial: <a href="http://michalbe.blogspot.com/2011/02/javascript-random-numbers-with-custom_23.html">Javascript random numbers with custom seed</a>http://michalbe.blogspot.com/2011/02/javascript-random-numbers-with-custom.htmlnoreply@blogger.com (MichalBe)1