tag:blogger.com,1999:blog-28646327070344421082018-03-05T09:03:50.508-08:00jppresentsA hobby game development blog, currently focused on javascript.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-2864632707034442108.post-68460433634884004072016-02-01T06:06:00.001-08:002016-02-01T06:07:06.059-08:00Life in space - and how to get rid of itI completed my #libGDXjam entry.<br /><br />You can play the game here:&nbsp;<a href="http://jppresents.itch.io/space">jppresents.itch.io/space</a><br /><br />While making the game I took a screenshot each minute, you can check out the commented timelapse video here:<br /><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/m9PlKgrT1d8/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/m9PlKgrT1d8?feature=player_embedded" width="420"></iframe></div><br />It was really fun making this game with libGDX.<br /><br />In a few days an android version should be available too.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-50923260920627161742016-01-10T03:47:00.001-08:002016-01-10T03:47:58.399-08:00Joining the #libGDXjamOn the 18th december last year the #libGDXjam started - and I joined.<br /><br />You can check out my (so far 18 post) dev log here:&nbsp;http://itch.io/jam/libgdxjam/topic/12064/devlog-about-life-in-space-and-how-to-get-rid-of-it<br /><br />And have a look at the game-page:&nbsp;http://itch.io/jam/libgdxjam/rate/50205<br /><br />I also made some videos (all linked with more information in the dev log):<br /><br />From old to new:<br /><br /><div class="separator" style="clear: both; text-align: center;"><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/nwi3lhK3yRo/0.jpg" src="https://www.youtube.com/embed/nwi3lhK3yRo?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/NxV8Zq0hZI4/0.jpg" src="https://www.youtube.com/embed/NxV8Zq0hZI4?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /><iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/5RXVsNIwZQM/0.jpg" src="https://www.youtube.com/embed/5RXVsNIwZQM?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br />JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-22889509750523623232015-12-19T02:08:00.001-08:002015-12-19T02:12:20.018-08:00ludum dare #34So I skipped one ludum dare, but with number 34 I was in again.<br /><br />The week before I came across a spriter-runtime for phaser - perfect!<br /><br />I prepared and tested that a little, and for the ludum dare weekend I came up this this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-e7SMacRm-_s/VnUry4KpE-I/AAAAAAAACug/uVCuBZlUSfk/s1600/title.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="http://2.bp.blogspot.com/-e7SMacRm-_s/VnUry4KpE-I/AAAAAAAACug/uVCuBZlUSfk/s400/title.png" width="400" /></a></div><br />The dog and the sheep are animated in phaser, the sheep have two alternative textures for variety.<br /><br />As mentioned thanks to the runtime, this time the animations are not spritesheets exported form phaser (see last entry) but are animated "live". This way the animations look much more smooth:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-_vja8FXUmiA/VnUsR9YZ2BI/AAAAAAAACuo/N1wmHGRoWGc/s1600/gameplay.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="http://2.bp.blogspot.com/-_vja8FXUmiA/VnUsR9YZ2BI/AAAAAAAACuo/N1wmHGRoWGc/s400/gameplay.gif" width="400" /></a></div><br /><br />Ludum dare page here:&nbsp;<a href="http://ludumdare.com/compo/ludum-dare-34/?action=preview&amp;uid=34367">http://ludumdare.com/compo/ludum-dare-34/?action=preview&amp;uid=34367</a><br /><br />Directly play my entry here:&nbsp;<a href="http://jppresents.net/static/ld34/">http://jppresents.net/static/ld34/</a><br /><br />And here is the short timelapse, that shows the work:<br /><br /><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/j_js5MXBH-s/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/j_js5MXBH-s?feature=player_embedded" width="420"></iframe></div><br /><br /><br />JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-91839623708909606712015-04-19T07:32:00.003-07:002015-12-19T02:12:53.695-08:00ludum dare #32I joined ludum dare this weekend (again) and made a silly game about a monkey that really doesn't like butterflies.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-0TuSASIwwr8/VTO8CjmiS1I/AAAAAAAACqU/uigjhzPMOHk/s1600/34367-shot0-1429428704.png-eq-900-500.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="http://2.bp.blogspot.com/-0TuSASIwwr8/VTO8CjmiS1I/AAAAAAAACqU/uigjhzPMOHk/s1600/34367-shot0-1429428704.png-eq-900-500.jpg" width="200" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">I used the new Webstorm 11 with the integrated typescript compiler. It's not as smooth as it could be but it's already better than the filewatchers that were used before.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-H03dfghf2lo/VTO8CWoBWpI/AAAAAAAACqQ/3yJ5yzDIRis/s1600/34367-shot1-1429428441.jpg-eq-900-500.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="http://1.bp.blogspot.com/-H03dfghf2lo/VTO8CWoBWpI/AAAAAAAACqQ/3yJ5yzDIRis/s1600/34367-shot1-1429428441.jpg-eq-900-500.jpg" width="200" /></a></div><br />You can check out my <a href="http://ludumdare.com/compo/ludum-dare-32/?action=preview&amp;uid=34367">ludum dare game and all the others here</a>.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-30222600695864689602015-01-30T08:21:00.001-08:002015-01-30T08:21:29.758-08:00Android and Webview + Html5Since I got my new android phone (a oneplus one) late last year I wanted to look into making an android game and I finally made good progress.<br /><div><br /></div><div>Since I am into javascript/typescript html5 games at the moment, I have looked into building an android app that basically consists of nothing but a fullscreen browser.</div><div><br /></div><div>With Android Studio 1.0 (the new intellij based google android developement studio) this was (with some googlefu) pretty easy - but then came the harsh awakening - while webview is based on chrome, it is:<br />a) an older version<br />b) not webgl enabled<br />c) running under more restricted power conditions then the normal chrome<br /><br />This makes it nearly unusable. The absolute same webpage displayed within a webview barely manages 20fps while the chrome version has steady 60fps.</div><div><br /></div><div>The app only has one activity which consists of one component, a webview (from android 4.4 on the webview is using the chrome rendering engine). Stackoverflow helped me get the webview to fullscreen and then it's just a matter of one line to enabling javascript and another to line to load the index.html for the game.</div><div><br />The issue reports about the performance problems are from 2013, when 4.4. first came out. (The previous webview had slightly better(!) performance).<br /><br />Android 5 is supposed to have a better webview - and since it is due within the next few month, I'll hold off on developing the android game and re focus myself on webgl and threejs for now.</div>JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-46471757043740514132015-01-25T04:54:00.001-08:002015-01-25T04:57:00.487-08:00website update and another small gameI finally updated the jppresents.net website to include some of the latest games.<br /><br />The <a href="http://jppresents.net/games/defense/">ludum dare tower defense</a>, <a href="http://jppresents.net/games/tanks/">tank wars</a> and a new small weekend project game "harvest: earthtongue" are now integrated in the site.<br /><br />The "<a href="http://jppresents.net/games/harvest/">harvest:&nbsp;earthtongue</a>" game was my "pay by art"-payment for <a href="http://erichermit.itch.io/earth-tongue">earthtongue</a>.<br />I thought it would be fun (and funny) to pay for a game with another game.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-xTsXrra_tNA/VMToBxhJlnI/AAAAAAAACYk/TyylJx1e6Ps/s1600/harvest.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-xTsXrra_tNA/VMToBxhJlnI/AAAAAAAACYk/TyylJx1e6Ps/s1600/harvest.gif" height="200" width="117" /></a><a href="http://2.bp.blogspot.com/-DYYtYYCaMLw/VMTn7-jLEQI/AAAAAAAACYc/oaiAO8X5UiQ/s1600/harvest.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-DYYtYYCaMLw/VMTn7-jLEQI/AAAAAAAACYc/oaiAO8X5UiQ/s1600/harvest.png" height="150" width="200" /></a></div><br /><br />Erich (the creator) was cool about it and I received my free copy.<br /><br /><blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/JPDevelop">@JPDevelop</a> Thank you!! Oh wowie, I love how bizarre it is to receive a game as payment for a game!! I'll email you a key in just a sec<br />— EricHermit (@Erichermit) <a href="https://twitter.com/Erichermit/status/554340665450971137">January 11, 2015</a></blockquote><script async="" charset="utf-8" src="//platform.twitter.com/widgets.js"></script>JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-20170172561441163822014-12-11T16:16:00.001-08:002014-12-11T16:16:39.590-08:00ludum dare 31 - one more small distractionThe last weekend was a ludum dare weekend and I decided to join the fun.<br /><br />I created a small tower defense game titled "Stop Christmas".<br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-BJ8qC2xmbmI/VIozF3LOwCI/AAAAAAAACWs/w9XQiJSosHs/s1600/screen1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-BJ8qC2xmbmI/VIozF3LOwCI/AAAAAAAACWs/w9XQiJSosHs/s1600/screen1.png" height="204" width="320" /></a></div><br />It's using phaser &amp; html 5 and you can play it <a href="http://ludumdare.com/compo/ludum-dare-31/?action=preview&amp;uid=34367">here</a>.<br /><br /><a href="http://ludumdare.com/">Ludum dare</a> is game jam / competition in which you have 48 hours to create a game matching a given theme. The theme this time was "whole game on one screen" - my tower defense matches this, but not in a creative way. You also have to create all the assets (graphics / sounds etc.) yourself in this 48 hour window.<br /><br />I was using the "unofficial" theme (which lost in the last round of theme voting) which was the unicode character "☃". This is why the enemies are all snowmen.<div><br /></div><div>You can build and upgrade towers and the remaining health of the player is visualized by "how cold" it is.</div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-XmilZfMqsjc/VIozKSg2UrI/AAAAAAAACW0/s1cwB0OW6jI/s1600/screen2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-XmilZfMqsjc/VIozKSg2UrI/AAAAAAAACW0/s1cwB0OW6jI/s1600/screen2.png" height="204" width="320" /></a></div></div>JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-30881203115526297912014-12-03T10:47:00.005-08:002014-12-03T10:47:49.248-08:00a little sidetracked: tank warsWhen I came across <a href="http://kenney.nl/assets/topdown-tanks">kenney's tank asset pack </a>and the new phaser version 2.2.0&nbsp;I got a little sidetracked and instead of continuing the work on the dungeon crawler I made a little tank shoot'em'up last weekend.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-lgnYaW7xpAo/VH9aFZWaPSI/AAAAAAAACWY/ofvVwjhM3a4/s1600/tankwars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-lgnYaW7xpAo/VH9aFZWaPSI/AAAAAAAACWY/ofvVwjhM3a4/s1600/tankwars.png" height="232" width="320" /></a></div><br /><br /><a href="http://phaser.io/">Phaser</a> is really great for writing 2d html5 games and it reduces the work required by a lot, since it not only manages all sprite related things but also comes with integrated physics.<br /><br />It ended up at 600 lines of typescript and you can play the result <a href="http://jppresents.net/static/tankwars/">here (for free in your browser)</a>.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-33880563590312329502014-11-18T12:40:00.001-08:002014-11-18T12:40:26.932-08:00combat against bats, wizards and those hammer guysHere is a &nbsp;new video showing off the <a href="http://jppresents.blogspot.ru/2014/10/enemy-wizard-character-model.html">wizards </a>with their <a href="http://jppresents.blogspot.ru/2014/11/first-projectile-fireball.html">fireballs </a>and the <a href="http://jppresents.blogspot.ru/2014/10/new-dungeon-crawler-features-enemies.html">bats </a>that are now available as enemies in the dungeon:<br /><br /><div class="separator" style="clear: both; text-align: center;"><object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i.ytimg.com/vi/1dxk0jLc_J8/0.jpg" height="266" width="420"><param name="movie" value="https://www.youtube.com/v/1dxk0jLc_J8?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="420" height="266" src="https://www.youtube.com/v/1dxk0jLc_J8?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div><br /><br />New in this video are also improved the combat animations for the main character. Instead of just moving the hand (and the weapon) now the whole character is animated to improve the feel of combat.<br /><br />Every attack now has a range of damage, a critical chance and a critical damage percentage. <br /><br />The combat texts have been changed a to better reflect what is going on: damage to the player is now red with a minus sign, damage to enemies is white and cirtical damage is yellow with a slightly bigger font.<br /><br />Things planned next:<br />- new textures for the dungeon (reducing the amount of 90° angles drastically)<br />- objects like: barrels and health pools<br />- combat skills (I am thinking along the lines of swipe, stun, whirl, jump)JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-36548232376576707872014-11-12T13:04:00.000-08:002014-11-12T13:04:09.416-08:00first projectile: fireball<div class="separator" style="clear: both; text-align: left;">The wizard is now ingame and can attack the player with fireballs.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-l1HhD8AUoM4/VFCJRWsOLqI/AAAAAAAACVY/E9-aNYlRCHw/s1600/fire.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/-l1HhD8AUoM4/VFCJRWsOLqI/AAAAAAAACVY/E9-aNYlRCHw/s1600/fire.png" height="353" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">wizard casting a fireball at the player</td></tr></tbody></table>The fireball itself is a blender model (a half sphere with a cone shaped tail) and it creates an alpha blended sprite every few frames&nbsp;of travel. These sprites have one of three random colors and fade out over half a second.<br />These sprites (and also the combat-text sprites and the hit-effect sprites) are never destroyed but kept in an array and the next effect will reuse the first currently invisible sprite and only create a new one if no unused sprite is available.<br /><br />I was looking into three.js particle systems (which are now actually named point cloud) for the animation effects - but in the end I went with simple sprites because it's easier to handle. The amount of sprites can be increased on the fly (this is not possible with point clouds) and also the amount of particles/sprites needed is so low that it does not (yet) matter performance wise.<br /><br />JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-77757293159059626312014-10-30T13:53:00.000-07:002014-10-30T13:53:05.455-07:00Typescript incomming...From the start of implenting games with javascript in 2013 I did not like the lack of precise auto completion in webstorm. Of course this is not webstorms fault, there is just no way of knowing what to auto complete without typed variables.<br /><div><br /></div><div>Another annoyance: small typos in javascript go unnoticed until the code is executed and even then the behavior sometimes is just strange and the error is not clearly identifiable.</div><div><br /></div><div>This might be fine or at least tolerable for small scripts, even small games. But I already got fed up with it. (Especially because I see what intelliJ (and therefor webstorm) is capable of with &nbsp;its indexing power, code completion and refactoring when I edit the Java code at work.)</div><div><br /></div><div>The solution seems to be typescript. After reading up on it I just started converting the game and it's going fine so far. My biggest javascript file (the "dungeonObject") is already converted into typescript, and with some minor modifications (and minor bugs) the game can already be played again. (Even though the rest of the code is still pure javascript.)</div><div><br /></div><div>A quick example of one of the benefits:</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-Dmp2JYEz7PI/VFKisw-RngI/AAAAAAAACVo/pcHQnuG-4mA/s1600/error.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/-Dmp2JYEz7PI/VFKisw-RngI/AAAAAAAACVo/pcHQnuG-4mA/s1600/error.png" height="112" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">yay, typing!</td></tr></tbody></table><div>Webstorm can tell me this, because the array is declared as:</div><div><br /></div><div><pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'Courier New'; font-size: 12pt;"><span style="color: #cc7832; font-weight: bold;">export var </span><span style="background-color: #40332b;">clickableMeshObjects</span>:THREE.Mesh[] = []<span style="color: #cc7832;">;</span></pre></div><br />I think this will be very helpful and enable me to find many errors without even having to start and test the game.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-55208590686639486622014-10-26T03:38:00.001-07:002014-10-27T00:08:57.295-07:00enemy wizard character modelThis morning I was not in the mood for coding, so instead I grabbed the avatar character model and modified it to create this wizard and thought I'd quickly show it to you:<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-eXoIgL-UAyI/VEzNf5FlP_I/AAAAAAAACVI/U1Klf4_7aHg/s1600/wizard.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-eXoIgL-UAyI/VEzNf5FlP_I/AAAAAAAACVI/U1Klf4_7aHg/s1600/wizard.gif" height="320" width="251" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">evil wizard casting something</td></tr></tbody></table>This also nicely sets up another coding goal. Since the wizard is clearly casting something, I will need to implement projectiles into the engine. In the case of the wizard I am thinking fireballs, but projectiles will be useful for arrows and other stuff, too.<br /><br />This post was the first time I wanted to export a blender animation to gif.<br />Here is how that works:<br /><br /><ul><li>render the blender animation into images (the default directory is c:\tmp)<br /></li><li>load the images into a gimp project (as seperate layers, simply drag &amp; drop all of them into the layer box)<br /></li><li>change the image as needed (for example I cropped it)<br /></li><li>run filters - animations - optimize<br /></li><li>export (check "as animation") and choose a name ending in ".gif"</li></ul>JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-394236635409109502014-10-21T11:21:00.003-07:002014-10-21T11:21:43.167-07:00new dungeon crawler features: enemies and combat<div class="separator" style="clear: both; text-align: left;">Since the first video I have implemented some new features that I would like to present today:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowFullScreen='true' webkitallowfullscreen='true' mozallowfullscreen='true' width='420' height='266' src='https://www.youtube.com/embed/SWc9a90JeUg?feature=player_embedded' FRAMEBORDER='0' /></div><br />The enemies (for details check out the <a href="http://jppresents.blogspot.de/2014/10/enemies-and-collision.html">last post</a>) can now be targeted (the current target is highlighted) and you can interact by clicking on them. Interaction in this case means, you hit them and they hit you.<br /><br />The hitting is visualized through an attack animation which moves the hand forward and rotates it nearly 90 degrees. Since the weapons are attached to the hand-bone the weapon appears to be swung.<br /><br />There is no visualization for the impact of the weapon yet (I will try for some kind of blood particle effect later), but the damage is shown as a number that floats up and fades out.<br /><br />The combat right now is very static, since there are no damage ranges, evasion chances, blocks, different attacks, skills or projectiles yet. I will have to come up with a fun fighting system once all the basics are in place.<br /><br />The death of an enemy is animated too, they fall backwards and then sink into the ground.<br />Since the enemies are just a differently textured clones of the player we have the same animation for the player dying, minus the sinking into the ground part but with an added "lights out" effect (as seen at the end of the video).<br /><br />I am working on a bat as a second type of enemy in blender:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-dRqWbmKQhfk/VEajfBu50uI/AAAAAAAACU0/VOnzftpmM2s/s1600/bat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-dRqWbmKQhfk/VEajfBu50uI/AAAAAAAACU0/VOnzftpmM2s/s1600/bat.png" height="184" width="320" /></a></div><br />And I am also coding a quick way to define dungeon layouts so I can start to test bigger dungeons.<br />So stay tuned or more updates.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-81528337620116789012014-10-15T12:39:00.000-07:002014-10-15T12:45:49.463-07:00enemies and collisionThe&nbsp;<a href="http://jppresents.blogspot.de/2014/10/threejs-dungeon-crawler.html">dungeon crawler I showed to you in the last post</a>&nbsp;is still missing many vital parts, one of them is enemies.<br /><br />So for now I introduced this guy (and some friends):<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-MYaHNmsqHpE/VD7CFXCE7yI/AAAAAAAACUU/R8_4h1X4rQU/s1600/tempenemy.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-MYaHNmsqHpE/VD7CFXCE7yI/AAAAAAAACUU/R8_4h1X4rQU/s1600/tempenemy.png" height="320" width="252" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">evil clone</td></tr></tbody></table>They are of course quickly reskinned versions of the player avatar. But they do the trick for now.<br /><div><br /></div><div>Making them move towards the player was easy - because the player could already move towards a target. For the enemies the player is the target (instead of the cursor).</div><div><br /></div><div>Collision is more interesting: It doesn't look very good when the enemies run through each other and through the player. So now every object (enemies and the player) has a collision radius.</div><div><br /></div><div>It took me this evening to figure out how to handle the collisions exactly - first approach was to just stop movement as soon as the spheres overlap any other sphere. But this way both spheres are stuck in each other.</div><div>Improvement one: Not only stop, but also move back the last movement. (substract the movement vector from the current position). This way the spheres stay outside of each other.</div><div><br /></div><div>This kind of works, but as soon as there are more enemies than one approaching from the same direction, the first one reaches the player, the second one stucks himself behind the first one.</div><div><br /></div><div>I played around with different ideas, calculate the angle to the target and to the collision target and trying to figure out how to move the enemy around the other. But I had to throw stuff away again and again, until I came up with this simple solution:</div><div><br /></div><div><div><pre>var collisionDirection = collisionObject.position.clone().sub(this.position);<br />collisionDirection.normalize().multiplyScalar(this.speed);<br />this.mesh.position.add(this.speedVector.clone().sub(collisionDirection));<br /></pre><pre></pre><pre></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;">Instead of subtracting the complete Movementvector in the case of collision, I only substract the "part" of the vector that goes into the sphere. This way &nbsp;(if the enemy does not plan to go straight through the sphere) there is still movement and it looks like they go around the sphere.</span></span></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;">The effect will be demonstrated in the next "show-and-tell"-Video.</span></span></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></pre><pre></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></pre><pre><span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></pre><pre></pre></div><div><br />As a small teaser, I leave you with this:<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-2dyIaoJxqZU/VD7NLbMuUPI/AAAAAAAACUk/AL1SbKQUCdA/s1600/teaser.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/-2dyIaoJxqZU/VD7NLbMuUPI/AAAAAAAACUk/AL1SbKQUCdA/s1600/teaser.png" height="240" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Yes, there is a leaf on the stick and yes this was a request by my wife.</td></tr></tbody></table><br /></div><div><br /></div><div><br /></div></div>JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-57938788630936330392014-10-14T10:45:00.001-07:002014-10-15T12:51:30.962-07:00three.js dungeon crawlerThis is the first post about the game I am working on. At this point I plan to make a realtime dungeon crawler with hack n' slash combat. It's going to be a browser game that requires no downloads to play.<br /><br />This video gives a short overview what I got so far:<br /><div class="separator" style="clear: both; text-align: center;"><iframe allowFullScreen='true' webkitallowfullscreen='true' mozallowfullscreen='true' width='420' height='266' src='https://www.youtube.com/embed/GCzb-v8nZfc?feature=player_embedded' FRAMEBORDER='0' /></div><br />To recap:<br />- two dungeon textures (groundfloor and wall)<br />- dungeon tiles (consisting of three tiles, ground, ground with one wall, ground with a corner)<br />- character texture<br />- character model with two animations (walking and idle)<br />- ground collision for the player<br />- custom mouse cursor, ability to detect clicks on the ground and visualize them<br />- player movement (toward the clicked target)<br />- different camera angles<br />- a test-weapon that can be attached to the players hand<br /><br />I plan to create everything from scratch, which means only using assets I create myself (possibly with some artistic help from my wife) and to use only "basic" libraries not full game engines.<br /><br />So far I am using:<br />- three.js for the graphics<br />- tween.js for all tweening needs (right now only the camera position changes)<br /><br />I'll keep you posted on the progress here - and of course once there is any real gameplay I will link playable demos too.JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-40940849830743200632014-10-12T03:39:00.002-07:002014-10-15T12:54:12.322-07:00blender + three.js + bones = animationsOn the topic of animations using bones in blender and exporting them to three.js: <br /><br />Remember this: Never set the exporter to any align (this took me 4 hours to figure out), always align "none".<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-lAc50Y5xs5A/VDkvLqHwUEI/AAAAAAAACUE/G4Ll5jWn6-M/s1600/align.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-lAc50Y5xs5A/VDkvLqHwUEI/AAAAAAAACUE/G4Ll5jWn6-M/s1600/align.png" height="320" width="294" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Three.js Exporter Options</td></tr></tbody></table><br /><br />Because: It will mess with the rotation of your bones while being animated. (In blender everything looks fine, and in three.js everything is fully out of whack.)<br /><br />From what I figure: The exporter moves the whole model (and also all bones) if the alignment is changed while exporting. (So far so good), but the pivot points of the bones are *not* moved with the rest. This way, if an animation rotates a bone it now rotates around some point, but definitely not the position it rotates around in blender.<br /><br />I found some pointers to similar problems in <a href="http://stackoverflow.com/questions/18752146/blender-exports-a-three-js-animation-bones-rotate-strangely">this question on stackoverflow</a> and while the answers were interesting and gave me pointers, seems nobody had the alignment problem I had.<br /><br />The tips form stackoverflow are:<br /><br />- Delete the armature Modifier before exporting<br /><br />- Checked the Vertex Groups<br /><br />- Keyframes for ALL bones at the start and end of the animation<br /><br />and my tips:<br /><br /><b>- Don't export with any alignment active in the exporter options</b><br /><b><br /></b><b>- Select the first action under model and under armature in the scene graph, and have the armature selected when exporting&nbsp;</b>(not doing this led to another export error, where the action names are correct, but the action itself is a copy of the one before it)<br /><br />All in all the exporting seems to be a very delicate process.<br /><br />Why I had set the alignment to center is another story - it's about how I export the dungeon-parts and will be covered in a later post.<br /><br />(Three.js &amp; blender exporter Version 68)JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0tag:blogger.com,1999:blog-2864632707034442108.post-24408938676388774602014-10-11T02:21:00.001-07:002014-10-15T12:55:59.040-07:00getting started with 3d: three.js + blenderI made the decision that I want to create a game in 3d.<br />This was three weeks ago. Since then I have made these technical decisions about the basics:<br /><br />- javascript<br />- Blender for all modelling<br />- Gimp for all textures<br />- Webstorm to code it in<br />- three.js as the webgl library<br /><br />Blender and 3d modelling in general is completely new to me, so I have been learning the blender basics for the last weeks. Also I have never programmed any 3d before, so getting to know three.js was also a challenge. I have used javascript/webstorm and gimp before to develop <a href="http://jppresents.net/gamelist">2d-games</a>,&nbsp;so at least those aren't completely new to me.<br /><br />The reason behind the tools: Blender &amp; Gimp are simply the best free tools available I could find. They also offer most of what the major (and pricy) products can do.<br />I decided on javascript, because I like the idea that no download is required for the game and it runs everywhere (where webgl is available) and also because I want to learn about programming the 3d parts of the game and not just use an engine like unity.<br /><br />The first "released" results, a simple buttefly I modeled and animated in blender is displayed using three.js:<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="http://jppresents.net/static/birthday/butterfly"><img alt="three.js butterfly" border="0" src="http://4.bp.blogspot.com/-3o-jNIeQYQg/VDjy88jtB7I/AAAAAAAACTw/rRhX7ohO5lc/s1600/three.jpg" height="238" title="" width="320" /></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-size: small; text-align: start;"><a href="http://jppresents.net/static/birthday/butterfly">http://jppresents.net/static/birthday/butterfly</a></span></td></tr></tbody></table>It's a virtual birthday card and not directly related to the game, but it was a good starting point to get to know the tools and evaluate them.<br /><br />More about the actual game in the next post...JPhttp://www.blogger.com/profile/15163736543795263871noreply@blogger.com0