Popular Content

Showing content with the highest reputation on 11/16/15 in all areas

  1. 1 point
    Hey guys, since we have a few beginners here on board, trying to make their first steps in the world of HTML5 games, I thought it might be good to point you to a few resources about how to learn to write good javascript code. JavaScript is a language where you have to be a bit careful about your syntax and code style if you want to write maintainable and readable code in the long run. The advice I give to most newcomers is: DONT dive right into developing a complex game! First learn how to handle the language properly. Spending a week or two with reading through a good JavaScript book and a couple of tutorials will give you enough knowledge that will increase your development speed a thousand times and helps you avoid common pitfalls for beginners. I would suggest every beginner to first decide for a good IDE that supports code completion and syntax checking. If they even support jshint you can't wish for much more! A few IDEs are: Netbeans, WebStorm, Microsoft Visual Studio, heck even Dreamweaver. Just pick one you like. Okay, lets throw a bit content at your brains! First out, a few books I can personally recomment reading: JavaScript - The Good Parts by Douglas Crockford O'Reilly, ISBN: 0596517742 Good for beginners JavaScript Patterns by Stoyan Stefanov O'Reilly, ISBN: 978-0-596-80675-0 Very good for beginners JavaScript - The Definitive Guide by David Flanagan O'Reilly, ISBN: 0596805527 JavaScript Cookbook by Shelley Powers O'Reilly, ISBN: 978-0-596-80613-2 JavaScript Web Applications by Alex MacCaw O'Reilly, ISBN: 978-1-449-30351-8 For advanced users High Performance JavaScript by Nicholas C. Zakas O'Reilly, ISBN: 978-0-596-80279-0 For users with basic to advanced knowledge You may find some of this books in digital PDF format, if you google for it. A list of more books in digital format: http://jsbooks.revolunet.com/ I also recommend a look at the digital books from Addy Osmani. ================================================================================================================ We don't stop there. When you read even only the top two books of this list, you are armed with a set of JavaScript knowledge to develop 99% of the games you want to. Lets continue with a list of online resources, for the more digitally aligned people out there Basic introduction into Javascript For beginners and advanced users. Explains what JavaScript is and how it works. https://developer.mozilla.org/en/JavaScript JavaScript learning portal by Mozilla Take this as your starting point for learning JS online. Mozilla gathers many notable sources and links of good tutorials and documentation on this page. This is one of the best sources for beginners, as well as for advanced users to learn something new. https://developer.mozilla.org/en-US/learn/javascript Google Code University: Videos for fundamental JavaScript understandment If you are looking for a quick introduction, watch this videos. The two JS videos are both about 17 minutes long and will give you a good basic understandment if you are a beginner. There are also videos about CSS and HTML on this page. http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/#javascript Learning advanced JavaScript by John Resig This information collection by John Resig covers basic mechanics of JavaScript but they are meant to be used as supportive content to his upcoming JS book, so lack descriptions and comments. We recommend to use this only if you already have a fundamental understandment of JS. http://ejohn.org/apps/learn/ Mozilla JavaScript Guide This advanced JS guide shows you how to work with JavaScript in the browser, what pitfalls and differences you have to watch out for in the different JS versions and good tips and best practices about debugging your JS code. https://developer.mozilla.org/en/JavaScript/Guide Best practices guide by the Opera guys This very long article covers many many good tips about what you should avoid when coding with JS. Many beginners mistakes are covered and explained why they should be avoided. http://dev.opera.com/articles/view/javascript-best-practices/ Usage cases for JavaScript by the Opera guys This article covers the topic what you can achieve with using JS on your websites in the first place. You have many resources for learning JavaScript now - so this one covers what it enables you to do. http://dev.opera.com/articles/view/javascript-uses/ JavaScript Garden A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language. http://bonsaiden.github.com/JavaScript-Garden/ Code Academy An interactive way to learn coding, with live examples, you solve directly in the browser. http://www.codecademy.com/ ================================================================================================================ Thats my 50 cent to help the beginners starting with JavaScript. If you want to add something here I forgot to cover, just post me suggestions. greetings, Chris
  2. 1 point

    [Phaser] Cut it!

    Hello there! My first more serious game since I've left GameMaker behind Cut it! it is a logic game and your task is to cut wood into equal parts. Of course there was game like this before - Slice it! and it was quite a big hit in times of first iPad. And because I really like concept of dividing shapes into smaller ones... here it is - Cut it! I've spend quite a lot of time developing it, but I've change graphics completely during that time. Link: http://www.circusmoth.co.uk/05.15/cutit/ I must admit, that GameMaker allows you to build a prototypes slightly faster than Phaser, but after prototype phase... Phaser speeds up and never stops. Great framework and I will stick with it for sure! Thanks for your time! If you have any comments, complains - feel free to share it below
  3. 1 point
    Hi, The last version of Phaser Editor is ready to download! This is a Release Candidate version (Phaser Editor RC 15.11). This time we are also releasing new great stuff: The website was reworked with a new look.We created a blog to keep you updated and write about the great features around Phaser Editor.In the blog you will find a quick start guide to help you with the main tasks. This guide includes 8 video demos.The subscription form was moved to a professional website so we can give you a better newsletter.This release is an evaluation product but with no expiration date, it just shows a warning message from time to time. For more details read the release notes. For the final release we are considering to open the source code under a MIT license. Enjoy Phaser Editor! Arian Fornaris
  4. 1 point
    Chris Smith

    PIXI Playground

    Hi guys I just wanted to share with a thing I created a moment ago. I call it PIXI Playground and the only thing it does is that it shows you in real time what you are doing. I've been thinking about it since I started to use PIXI and after some tries and thinking I've managed to create a usable version of my idea in about 2 hours just with simple couple lines of code. So here's basically what this Idea look like: Also on youtube: https://www.youtube.com/watch?v=SetlnM1PCMY And a little more advanced usage: https://www.youtube.com/watch?v=YVPGsdPJvro Syntax is a little bit different from original PIXI because one, I'm using coffeescript and two, I've wrote lot of helpers and extensions to create PIXI object. But basic idea could be used with pure PIXI and javascript also I've created it with designing user interfaces in mind because hard coding everything and refreshing browser all the time is so boring. So what do you think? Anyone have been doing / thinking about something similar and wats to join forces with me? Or maybe something similar exists and I'm repeating someone's work?
  5. 1 point

    Draw rectangle and mesh selection

    At the end I did it as I wrote in my last post. 2D Canvas overlaying 3D canvas where rectangle is drawn. The performance (frame time, render time, and potential FPS weren't affected), but the frame rate was slightly decreased (55-60fps) when rectangle was visible.All corners are then translated to 3D world coordinates (scene.pick method) (done when mouse button is released)All visible meshes (scene.getActiveMeshes) are stored into an array and filtered by:Name (to avoid skybox and ground)Checked if mesh is inside an rectangle using this. I'm sure the entire process can be speed up (a lot), but it will do for now.
  6. 1 point

    creating a closed slice of a cylinder

    The enclose feature is merged for the cylinder. I will let you know how it works soon. Basically : BABYLON.MeshBuilder.CreateCylinder("c", { arc : 0.6, enclose: true }, scene);This will close the section of an opened cylinder. Maybe useful to make pie charts, for instance. I will tweak it (not already done) for the user can set a different color and texture per surface : top and bottom cap, tubular surface (current behavior) and each for each quad closing the sliced cylinder. http://www.babylonjs-playground.com/#1XVEKZ Moreover, a new feature has been added : hasRings. This makes sense only for a cylinder with several subdivisions (at last, a real simple use for these subdivisions !) BABYLON.MeshBuilder.CreateCylinder("c", { subdivisions: 5, hasRings: true }, scene);This will make each height subdivision independent so it will be able to have its own color or texture (not yet implemented, soon). This means each cylinder stripe will then be an independent surface. Of course, this works together with enclose also. A ring is just an independent subdivision. So you will have then to consider an array of surfaces to set colors/textures. Given a sliced cylinder with 3 rings for instance, this array will have 8 surfaces and will always be sorted this way : ar[0] = bottom cap ar[1] = first ring, tubular surface ar[2] = first ring, first section quad ar[3] = first ring, second section quad ar[4] = second ring, tubular surface ar[5] = second ring, first section quad ar[6] = second ring, second section quad ar[4] = third ring, tubular surface ar[5] = third ring, first section quad ar[6] = third ring, second section quad ar[7] = top cap More generally: ar[0] = bottom surfacethen one array element per ring if not sliced or 3 elements per ring (1 tubular + 2 quad surfaces) if slicedar[last] = top surface Once this done, I will try to do this with the sphere what is more complex because it can be sliced horinzotally and vertically (arc + slice parameters). And then the tube ... all as live updatable parameters aaarrrgg
  7. 1 point
    I think you'd have to manually run the update loop yourself, stop letting Phaser call it via requestAnimationFrame. Check out Phaser.Game#enableStep and disableStep for updating the game loop manually.
  8. 1 point
    Sprite.update will only be called if it's a child of a Group. Under no other circumstance will it be called. It's also an entirely empty function, update doesn't actually do anything, it's purely there for you to override. So if you need a Sprite to update its children, then override its update function and code in whatever conditions you need to make that the case. Oh and no, this is nothing to do with Pixi.
  9. 1 point
    Hi 3D gurus, Starting yesterday, the Xbox One is now supporting WebGL thanks to the new system update. I've written a small article with 2 videos showcasing that: http://blogs.msdn.com/b/davrous/archive/2015/11/13/debugging-your-html5-on-xbox-one-ms-edge-with-the-xbox-windows-store-app-and-vorlon-js.aspx You'll see the Mansion Babylon.js demo running fine with Web Audio and Gamepad support! Conclusion: everything we're currently building for the other web platforms (PC, tablets and smartphones) is already running fine on Xbox One. I'm proud of the architecture of Babylon.js that handle any new platform like a charm. Enjoy! Cheers, David
  10. 1 point

    Grouping - parent child relationship

    Ah, I just copied from the code in the initial post, didn't even expect that "monster" could be a material
  11. 1 point

    Help make a laser beam

    You say "when I move line have been broken" which I'm guessing refers to the way the beam fragments look when you move up and down on the screen? Sounds like you just need a single sprite with the lazer beam drawn in it. If you want it to 'grow' then you could mess with the width (or scale.x), or use masking. Another alternative is to keep a link between each beam fragment and the ship which fired them, and on every update set the beam y value to match the ship's y value.
  12. 1 point
    Related module: https://github.com/andyhall/babylon-atlas
  13. 1 point

    Mesh part smooth part flat shading

    Hi. From what I know, this is achieved through normal setting for each vertex. At the vertex (or edge) common between 2 or more faces, the normal can be set differently. With flat shading, the normal of vertex is just orthogonal to the face. Giving your gray sharp change from one face to the other (assuming faces are not parallel). With smooth shading, the normal at vertex is kind of averaged with the normal of the vertex of the neighbour face (giving a smooth transition at the edge). When the pixel is not close to edge, the fragment shader is interpolating the normal between all vertex of the face. This gives smooth gray shading when moving on face and smooth transition as well when crossing face edge. Goal. With edge split modifier, it a mix of both. The modifier check the angle between faces at the edge, then 2 cases: case 1: the angle is small enough to get almost parallel face then get normal as flat. case 2: the angle is high than threshold, so you get different normal on the vertex shared between faces. (should get a bit more complex when more than 2 faces involved on a single vertex, but you probably get the picture). IN BJS, a face is 3 vertex, each one can have its own normal (I mean independent normal from neighbour face vertex). This is how you can model smooth/flat shading in your babylon mesh. As far as I know, this should not be linked to the material used (material will just render as needed by normal definition in the geometry of the object). I you have this setting done as you like in a blender object, then the normal should be set as required. You can probably export to BJS and get your flat/smooth rendering as well (any basic material should do).
  14. 1 point

    Phaser app Integration?

    Thanks. The only major difference I found personally was since it was an isolated app, if you had high ram usage, or a lot of chrome tabs open, Phaser ran smoother. And ofcourse, if you package your game together with all your assets, everything is loaded locally. Thus, saving your webserver with HTTP requests and faster loading times on the clientside. That's only what I've noticed so far, but as you said nothing really 'significant'. Edit: Plus, it's really damn cool opening up an .exe, and your game is like BOOM! Right there, I like that
  15. 1 point

    Weird behavior in Bunny sample

    Because the first render call runs before the texture image is loaded. The second one loops forever so it keeps drawing and eventually the texture loads and it draws it.
  16. 1 point
    Absolutely and even keeping the list of materials using a texutre is not that easy because of custom materials that people can create. How can I force them to indicate to the texture that they are using it? this will require a massive rework I'm not ready to do uv were an example to make it clearer (I should have used fog actually). The real issue with isReady is that this function compiles the right shader for the current option by defining "#define" to use inside the shader. This is done to provide the more efficient shader possible (for example if fog is off, the shader code for fog willl be removed hence better perf). So if you go there: https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/babylon.standardMaterial.ts#L20, you're gonna see the options that can control the compilation of the shader: public DIFFUSE = false; public AMBIENT = false; public OPACITY = false; public OPACITYRGB = false; public REFLECTION = false; public EMISSIVE = false; public SPECULAR = false; public BUMP = false; public SPECULAROVERALPHA = false; public CLIPPLANE = false; public ALPHATEST = false; public ALPHAFROMDIFFUSE = false; public POINTSIZE = false; public FOG = false; public LIGHT0 = false; public LIGHT1 = false; public LIGHT2 = false; public LIGHT3 = false; public SPOTLIGHT0 = false; public SPOTLIGHT1 = false; public SPOTLIGHT2 = false; public SPOTLIGHT3 = false; public HEMILIGHT0 = false; public HEMILIGHT1 = false; public HEMILIGHT2 = false; public HEMILIGHT3 = false; public POINTLIGHT0 = false; public POINTLIGHT1 = false; public POINTLIGHT2 = false; public POINTLIGHT3 = false; public DIRLIGHT0 = false; public DIRLIGHT1 = false; public DIRLIGHT2 = false; public DIRLIGHT3 = false; public SPECULARTERM = false; public SHADOW0 = false; public SHADOW1 = false; public SHADOW2 = false; public SHADOW3 = false; public SHADOWS = false; public SHADOWVSM0 = false; public SHADOWVSM1 = false; public SHADOWVSM2 = false; public SHADOWVSM3 = false; public SHADOWPCF0 = false; public SHADOWPCF1 = false; public SHADOWPCF2 = false; public SHADOWPCF3 = false; public DIFFUSEFRESNEL = false; public OPACITYFRESNEL = false; public REFLECTIONFRESNEL = false; public EMISSIVEFRESNEL = false; public FRESNEL = false; public NORMAL = false; public UV1 = false; public UV2 = false; public VERTEXCOLOR = false; public VERTEXALPHA = false; public NUM_BONE_INFLUENCERS = 0; public BonesPerMesh = 0; public INSTANCES = false; public GLOSSINESS = false; public ROUGHNESS = false; public EMISSIVEASILLUMINATION = false; public LINKEMISSIVEWITHDIFFUSE = false; public REFLECTIONFRESNELFROMSPECULAR = false; public LIGHTMAP = false; public USELIGHTMAPASSHADOWMAP = false; public REFLECTIONMAP_3D = false; public REFLECTIONMAP_SPHERICAL = false; public REFLECTIONMAP_PLANAR = false; public REFLECTIONMAP_CUBIC = false; public REFLECTIONMAP_PROJECTION = false; public REFLECTIONMAP_SKYBOX = false; public REFLECTIONMAP_EXPLICIT = false; public REFLECTIONMAP_EQUIRECTANGULAR = false; public INVERTCUBICMAP = false; For example, if you set checkOnlyOnce = true and you use your material with a mesh without bones and with a mesh with bones then it will NOT work. Why? because the first mesh compiles the shader without bone and the second one will not compile a new version because of checkOnlyOnce. This cannot be fixed even with setters unfortunately. Smart shaders are really powerful (If you want more detail on it, I wrote a chapter about them in this book) but the performance and memory gains come at the cost of adapting them per mesh and per frame.
  17. 1 point
    yeah, re-writing an input element is a proper ballache. how about old school text entry? like the 'alphabet on a wheel' that you flick left and right to find the characters you need? that'd be perfect for a high score entry (its only super annoying for long texts) and, depending on your games, could be more in-keeping with your look and feel than a DOM form. Implementing your own keyboard is always an idea, its fairly straight forward, if annoying, but, done once and turned into a module for reuse then you can probably justify the annoyance.
  18. 1 point

    Beautiful effects

    Unreal! And welcome, Stvsynrj! Man, you know your stuff! Coooooooool!
  19. 1 point
    do everything you can to avoid doing it, really. I have lost weeks of my life to trying to get a good solution working on mobile, and there was always something that caused every idea I tried to fail. If I had to have text input, I would leave the canvas entirely and go to a properly constructed HTML page and then afterwards return to the canvas page.
  20. 1 point
    I think you need create Mac version
  21. 1 point
    Collection of FREE e-books http://jsbooks.revolunet.com/ Beginners & also advanced JavaScript (modularity, unit testing, ...)jQueryCoffeeScriptHTML CAnvasNode.JSDOMMongoDBand more... Links to lots of articles http://superherojs.com/ Understanding JavaScriptCode organization, modularity, and design patternTesting your applicationTools and workflowPerformance and profilingSecurityand more...