{"assets":[],"author_link":"author\/sko\/","author_name":"Avant-Marde","cat":"LD #26","categories":["LD #26"],"comments":[],"epoch":1366908960,"event":"LD26","likes":4,"metadata":{"p_key":"78911","p_author":"Avant-Marde","p_authorkey":"0","p_urlkey":"287921","p_title":"Simple 2D platformer engine (SFML2+HTML5)","p_cat":"LD #26","p_event":"LD26","p_time":"1366908960","p_likes":"4","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1366934400","event_key":"16","event_name":"LD26"},"source_url":"2013\/04\/25\/simple-2d-platformer-engine-sfml2html5\/","text":"<div class=\"wp-caption aligncenter\" id=\"attachment_229834\" style=\"width: 330px\"><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/04\/Kaala.png\"><img alt=\"Kaala\" class=\"size-full wp-image-229834\" height=\"240\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2013\/04\/Kaala.png\" width=\"320\"\/><\/a><p class=\"wp-caption-text\"><em>Kaala<\/em> was the name given to the little engine.<\/p><\/div>\n<p><em>The above picture says a thousand words along with the title of this post, of course. To hear a million words, <a href=\"http:\/\/royalrailway.com\/gammalt\/tmp\/spel\/spel.html\" title=\"Try Kaala\">go try out the HTML5 demo yourself right away<\/a>\u00a0in your browser. Use WASD for movement.<\/em><\/p>\n<p>I am sure having fun trying to provide some helpfulness this LD around! So far, I\u2019ve written about\u00a0<a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/04\/24\/holy-trinity-of-sfml-2-0-how-to-set-up\/\">how I set up SFML 2.0 for cross-compilation<\/a>\u00a0and made a little <a href=\"http:\/\/www.ludumdare.com\/compo\/2013\/04\/25\/rectangle-collision-sfml-2-0\/comment-page-1\/#comment-112375\">rectangle collision demo in SFML 2.0<\/a>\u00a0for you to use. I have now spent the evening fixing some bugs in my old, simple 2D platformer engine that I wrote in June last year using SFML 2.0, which I later converted to HTML5 using Canvas some time in September or so the same year. I transferred the bug fixes to that version as well and then I packaged into a grand present the following:<\/p>\n<ul>\n<li>Four subfolders, labelled <i>Mac<\/i>,\u00a0<em>Linux<\/em>,\u00a0<em>Windows<\/em> and\u00a0<em>HTML5<\/em>.<\/li>\n<li>I compiled the SFML 2.0 version for OS X, Linux and Windows alike and provided those executables in subfolders labelled\u00a0<em>DEMO<\/em>.<\/li>\n<li>I included the source code, of course. It is the same for OS X, Linux and Windows (C++) and different for HTML5 (JavaScript).<\/li>\n<\/ul>\n<p>The code is messy at points and very uncommented, but at least the C++ version has a good file hierarchy of subfolders and classes. The JavaScript version has everything in a single file but at least still uses \u201cclasses\u201d as JS provides them.<\/p>\n<h2><span style=\"text-decoration: underline;color: #0000ff\"><a href=\"http:\/\/www.royalrailway.com\/gammalt\/Kaala\/KaalaSFML2AndHTML5.zip\" title=\"Download Kaala\"><span style=\"color: #0000ff;text-decoration: underline\">The grand .zip archive containing all four versions can be downloaded here.<\/span><\/a><\/span><\/h2>\n<p>If you do want to use it, check the code out and try to play with it. I won\u2019t explain it in detail, but I can give you some clues.<\/p>\n<ul>\n<li>WASD movement in all versions.<\/li>\n<li><span style=\"line-height: 13px\">The HTML5 version uses images for graphics. The C++ versions only use SFML to draw rectangles.<\/span><\/li>\n<li>The\u00a0<em>Character<\/em>\u00a0as well as the\u00a0<em>Block<\/em>\u00a0class both derive from\u00a0<em>Collidable<\/em>\u00a0which derives from\u00a0<em>Object<\/em>.<\/li>\n<li><em>Character<\/em> has set gravity enabled in the constructor through a call to\u00a0<em>setGravityEnabled()<\/em>.\u00a0<em>Block<\/em> has not.<\/li>\n<li>Collidables are assigned \u201cmasks\u201d as hitboxes. The character\u2019s mask\u2019s size is taken from a loaded .png which isn\u2019t actually used for drawing in itself \u2013 either modify this code to set a hardcoded value, or modify the code to use the image, but if you remove the image from the project, it won\u2019t load, the size won\u2019t be retrieved, and the character\u2019s hitbox will be 0x0 in size, making it fall through the ground and be invisible.<\/li>\n<li>One can\u2019t hold the jump button (W) down to make the character jump again as soon as it lands. This is manually programmed, and can easily be reverted by going into\u00a0<em>Character<\/em>\u2018s <em>update()<\/em> function and modify the code there. I commented instructions into the file.<\/li>\n<li>There is a simple image loader for the C++ version implemented. You can see the loading of images in\u00a0<em>Game<\/em> and the usage of such an asset in <em>Character<\/em>. I don\u2019t remember if there were actually problems drawing those images, but I wouldn\u2019t think so \u2013 try it out yourself.<\/li>\n<\/ul>","time":"April 25th, 2013 4:56 pm","title":"Simple 2D platformer engine (SFML2+HTML5)","title_was_empty":false}