Popular Content

Showing most liked content on 02/22/2018 in all areas

  1. 2 points
    This is a bug in the loader. I'll submit a fix shortly.
  2. 2 points
    French spotted!
  3. 1 point
    I'm new to Pixi.js I did a code to make a simple 3 frame animatedSprite but it never leaves the first frame, if I do a gotoAndPlay(1) it goes to the desired frame and stops, and if I console.log the ticker it keeps on the frame as it were stopped but the playing property is true. Can't find the error anywhere. Somebody could help me out here? The code is below: var w = window.innerWidth, h = window.innerHeight, objs = {}, tex = {}, anim = {}, prop = w/16, props = { grass: [2060, 745, 16], trave: [1334, 471, 10], rede: [1309, 454, 9.8] }; var app = new PIXI.Application(w, h, {backgroundColor: 0x33aaff}); app.renderer.autoResize = true; resizeAll(); $('#div_canvas').append(app.view); objs['message'] = new PIXI.Text( "Carregando...", {fontFamily: "Arial", fontSize: 20, fill: "white"} ); objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.stage.addChild(objs['message']); app.loader .add('css/fonts/Quantico-Regular.otf') .add('img/grass.png') .add('img/trave.png') .add('img/rede.json') .on("progress", loadProgressHandler) .load(onAssetsLoaded); function loadProgressHandler(loader, resource){ objs['message'].text = "Carregando..."+(Math.round(loader.progress*100)/100)+"%"; objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.renderer.render(app.stage); } function onAssetsLoaded() { app.stage.removeChild(objs.message); delete objs.message; tex['grass'] = app.loader.resources["img/grass.png"].texture; tex['trave'] = app.loader.resources["img/trave.png"].texture; tex['rede'] = app.loader.resources["img/rede.json"].textures; anim['rede'] = []; for(var i=0; i<3; i++){ anim['rede'].push(tex['rede']['rede0'+i+'.png']); } console.log(anim.rede); objs['grass'] = new PIXI.Sprite(tex['grass']); objs['grass'].anchor.set(0.5, 0.0); objs['grass'].position.set(app.screen.width/2, app.screen.height/2); objs['trave'] = new PIXI.Sprite(tex['trave']); objs['trave'].anchor.set(0.5, 0.8); objs['trave'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'] = new PIXI.extras.AnimatedSprite(anim.rede); objs['rede'].anchor.set(0.5, 0.8); objs['rede'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'].animationSpeed = 1; objs['rede'].play(); resizeAll(); app.stage.addChild(objs['grass']); app.stage.addChild(objs['rede']); app.stage.addChild(objs['trave']); app.ticker.add(function() { console.log(objs['rede'].totalFrames, objs['rede'].currentFrame); }); } function resizeAll(){ var propW = w/16; var propH = h/9; if(propW>propH){ w = propH * 16; }else if(propW<propH){ h = propW * 9; } prop = w/16; for(var i in objs){ if(typeof props[i] !== 'undefined'){ objs[i].width = props[i][2]*prop; objs[i].height = (objs[i].width/props[i][0])*props[i][1]; } } app.renderer.resize(w, h); }
  4. 1 point
    Robin Vencel - Pencilkids


    Hi My name is Robin Vencel, I am an independent games developer and the creator of the Monkey Go Happy series. www.monkeyhappy.com is completely free and has over 160 html5 stages right now. I add 2 new point and click stages per week. I personally create these with love and care for my fans. Right now I get about 10,000 visitors day. If you have any questions please let me know. Thank you for your time. Robin Vencel www.monkeyhappy.com
  5. 1 point

    Blender exporter - isPickable flag

    What I meant by serializable is, will something in a .babylon file be used? Answer, yes. As far as default, it is True. Next week for both .babylon & .js exporters. Other changes here
  6. 1 point
    Thanks brianzinn for your time. The problem is with the .babylon file. So, the issue is resolved after creating a new file.
  7. 1 point

    Brunch with Phaser 3 (starter project)

    A Brunch skeleton for making games with Phaser 3. (Why Brunch?) Choose your own adventure with CoffeeScript, ES6, TypeScript, or plain JS. server live-compiles and live-reloads minifies (in production mode) fast builds automatic NPM integration easy! npm install -g brunch && brunch new <project> -s phaser github.com/samme/brunch-phaser
  8. 1 point

    Brunch with Phaser 3 (starter project)

    Great boilerplate!
  9. 1 point
    Textures are automatically reused when they are the same
  10. 1 point

    Uglify for ES6

    Ok, I think you guys are talking about the ES6 module type. Where as I am talking about the ES6 Target type, where Typescript classes get transpiled into javascript classes, and basically everything in es6 EXCEPT modules. I actually tried to get Typescript modules to transpile into ES2015 modules, but still get this transpiled: var NameSpace; (function (NameSpace) { . . . }) (NameSpace || (NameSpace = {})); This is fine for me. I probably do not want to have to do imports anyway. My target environment is Cordova. I know Cordova uses Node to do its building, but I do not want to muck with that. I am making all my hand-built code in a separate area using typescript, then just doing a simple copy to the Cordova project's "www" directory to deploy. Pretty sure iOS & Android are good for most of ES6, but have not gotten ES6 code all the way through yet. The good news is, I just did a test against the current CDN (3.1.1) babylon. There I put a small script tag in the html for simplicity. This tag has an ES6 subclass of BABYLON.Mesh generated from Tower of Babel Blender exporter. It works fine! I have a constructor. It is calling super(), as well as setVerticesData() & setIndices(). The problem a few posts back was, I converted my QI extension to Target ES6, but had not modified the exporter from ES3, so probably an ES3 "faked" class cannot "fake subclass" an ES6 class. Here is the script tag from the test: var TEST; (function (TEST) { function CONTIG(array, offset, begin, end) { for(var i = 0, len = 1 + end - begin; i < len; i++) { array[offset + i] = begin + i; } } class Mesh extends BABYLON.Mesh { constructor(name, scene, parent = null, source, doNotCloneChildren) { super(name, scene, parent, source, doNotCloneChildren); this.setVerticesData(BABYLON.VertexBuffer.PositionKind, new Float32Array([ 1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,1,1,1,1,-1,-1,1,-1,1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,1,1,-1,-1,1,1,-1,1,-1,1,1 ,1,1,1,-1,-1,-1,-1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,-1,-1,1 ]), false); let _i = new Uint32Array(36); CONTIG(_i, 0, 0, 17); _i.set([0,18,1,3,19,4,6,20,7,9,21,10,12,22,13,15,23,16], 18); this.setIndices(_i); } } TEST.Mesh = Mesh; })(TEST || (TEST = {})); var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true, { stencil: true }); var scene = new BABYLON.Scene(engine); new BABYLON.PointLight("Lamp", new BABYLON.Vector3(4.08,5.90,-3.98), scene); var camera = new BABYLON.UniversalCamera("Camera", new BABYLON.Vector3(7.48,5.34,-6.51), scene); camera.rotation = new BABYLON.Vector3(.46,-.81,0); scene.setActiveCameraByID("Camera"); new TEST.Mesh('name', scene); engine.runRenderLoop(function () { scene.render(); });
  11. 1 point
    Texture are already loaded asynchronously Only transfer to GPU cannot be done asynchronously (because of WebGL) You can then use the onLoad parameter of the texture constructor to do your swapping https://www.babylonjs-playground.com/#IKANKZ
  12. 1 point
    There is no repo yet. I wanted to see people's opinion on that first. Then we should decide if we're creating new one, how we're naming the whole thing etc.
  13. 1 point
    onInputUp should work. Also see examples/v2/input/group-input-events examples/v2/input/input-enable-group
  14. 1 point

    Drawing an ellipse from 3 points

    Thank you @Wingnut for giving me the hint, it was exactly what I needed : )
  15. 1 point
    Hey CB, congrats on having the longest thread title EVER. Let's see... about 7-8 secs for 200 ADT's? Actually, that's probably expected, considering the amount of work/code/measurements it takes to create an ADT for each mesh. Have you tried adding all 200 textLabel to a SINGLE full-screen ADT, and then using textLabel.linkWithMesh for each? https://www.babylonjs-playground.com/#XCPP9Y#16 http://doc.babylonjs.com/how_to/gui#tracking-positions Can you give me a report on your speeds... using THAT method? (thx)
  16. 1 point
    I've been working with @enpu to add a good support for PhysicsEditor in Panda2. I've also created a tutorial: https://www.codeandweb.com/blog/2018/02/14/panda2-physics-tutorial
  17. 1 point

    get all meshes to merge them into one

    Oula, you can not do that. You must merge meshs that share the same materials and textures. it can not work otherwise.
  18. 1 point

    for customization of on screen dom button

    in my project i write these code for circle and arrow ...in index.html <div class="circel"> <div class="outer"> <p><i class="up" id = "up" onmousedown="moveup()" ontouchstart="moveup()"></i></p> <div class="inner" id = "inner"></div> <p><i class="right" id = "right" onmousedown="moveright()" ontouchstart="moveright()"></i></p> <p><i class="left" id = "left" onmousedown="moveleft()" ontouchstart="moveleft()"></i></p> <p><i class="down" id = "down" onmousedown="movedown()" ontouchstart="movedown()"></i></p> </div> </div> and for dragging i write these code in code2.js function moveup() { //camera.fov -=0.03; camera.position.x -=3; } function movedown() { camera.position.x +=3; } function moveleft() { camera.rotation.y -=0.03; } function moveright() { camera.rotation.y +=0.03; } var xpos; var ypos; $(document).ready(function() { $( "#inner" ).draggable({ cursor: 'move', containment: 'parent', revert: true }); // sets draggable the element with id="dg" $('#inner').draggable({ // get the initial X and Y position when dragging starts start: function(event, ui) { xpos = ui.position.left; ypos = ui.position.top; }, // when dragging stops stop: function(event, ui) { // calculate the dragged distance, with the current X and Y position and the "xpos" and "ypos" var xmove = ui.position.left - xpos; var ymove = ui.position.top - ypos; // define the moved direction: right, bottom (when positive), left, up (when negative) //var xd = xmove >= 0 ? ' To right: ' : ' To left: '; //var yd = ymove >= 0 ? ' Bottom: ' : ' Up: '; if(xmove >= 0 ) { camera.rotation.y -=0.03; }else{ camera.rotation.y +=0.03; } if( ymove >= 0 ) { camera.position.z -=3; }else{ camera.position.z +=3; } } }); });
  19. 1 point

    Brunch with Phaser 3 (starter project)

    I just installed the Phaser 3 Brunch! Fantastic, definitely easy to setup and start running with Typescript and the definitions.
  20. 1 point
    Thanks for the help Ivan. My preferred method was to overload it but I couldn't work out how. The code seemed to be trapped inside the constructor of the class or something. So I just downloaded pixi.js and removed the masky.r from the spriteMaskFilter function and it works great. So thanks very much. If you could work out how to overload it I would still prefer that for if sometime in the future i want to change versions but for now I am very happy.
  21. 1 point
  22. 1 point

    360 videos

    nice. yes, kind of hard to find. https://commons.wikimedia.org/w/index.php?search=360+filetype%3Avideo @Deltakosh idk. maybe the texture resolution, shouldn't be downscaled ? it looks good in browser, or get its downscaled becourse of missing html tag element ... exploring 1080p (for testing purposes only) https://www.babylonjs-playground.com/#ACY4U7#2 you can also weird nummbers like { resolution: 512 } without a visibel effect (just saying) good work as always.
  23. 1 point

    Phaser 3 API's?

    I think they'll eventually be in http://phaser.io/docs/3.0.0/index, etc., like the others, it will just take a little more time.
  24. 1 point
    Try adding, e.g., <meta name="viewport" content="initial-scale=1"> to your page if it has no viewport description.
  25. 1 point

    VR offline

    added an issue "VR fallback without model" - https://github.com/BabylonJS/Babylon.js/issues/3798
  26. 1 point
    This is correct. Lights are only impacting performance at render time
  27. 1 point

    Begining HTML5 Game Development

    This is actually part of the learning experience, googling a subject and being able to pick the good from the garbage. The problem is that most people writing about beginner subjects aren't much past the beginner level themselves so the info can be a little inconsistent or even incorrect. There is actually a double problem here for the web: because web tech develops at such a fast rate a lot of stuff goes out of date quickly. https://developer.mozilla.org/en-US/ MDN is a go-to resource. The W3C website has some similar resources but it isn't as well written or updated, plus its sometimes just inaccurate, but you will likely come across it. Just google for blogs and other resources, you'll often stumble across a few content creators you like, make sure you get a feed of their blogs and following them on twitter is a good idea. https://www.smashingmagazine.com/ is usually consistently high quality, although I haven't looked at it for a while and not sure how much beginner stuff it has. Not a gaming resource though. https://github.com/getify/You-Dont-Know-JS is a fantastic resource and Kyle Simpson is an incredible developer, its not a gaming slant but a fantastic JS series of books. That last one is a github link, once you get beyond the real beginner stage you'll need to be looking through any source code you can find, many people who shout about their games here also provide links to their github source code. This is extremely daunting at first though, so probably not that useful when starting out. In a similar vein, when you get going you'll probably want to start using third-party modules and import them in to your code. NPM is one such repository of packages (there are millions). You'll find that pretty much everything there is open source and will contain links to the source code. Once you get in to that you'll find you see the same names of people churning out modules, read their code, if they have blogs read them. Again, this is extremely daunting at first so tackle it later.
  28. 1 point

    Uglify for ES6

    I'm not sure that file is officially supported yet, because otherwise there would be a module or jsnext:main more likely in package.json. { ... "main": "dist/preview release/babylon.js", "module": "dist/preview release/es6.js", // BJS doesn't have this "jsnext:main": "dist/preview release/es6.js", // BJS doesn't have this .. } Sounds like you're not using browserify or webpack and "module" and "jsnext" are only a hint for them, so that doesn't affect you, but that's a good way to see if it's official. In your import you can specify that es6 file as per latest comment on issue: https://github.com/BabylonJS/Babylon.js/issues/3314 import { Scene, Vector3 } from "babylonjs/es6" I'm using babel with ES7 features to convert to target ES5 and then uglify, but with webpack.
  29. 1 point

    Phaser 3 API's?

    They currently live in this folder on github. Not sure when they will be properly launched and published, but you can download them from there.
  30. 1 point

    Particles dispose

    I'm on it Will be done for next commit!
  31. 1 point
    There are quite a few threads on this that might be helpful, try searching the forums. I think there are a couple of quick things to think about though: * Coding is really hard. It is very rewarding (and fun) but quite difficult, be prepared to invest time and effort in to it (you may already be there on that!). * HTML5 makes things a little trickier as you have to consider JS, CSS and HTML. If you're coding canvas-based games (as most here do) then it's 99.9% JS. * You'll need to do plenty of reading (or listening) but get your hands dirty, write as much code as you can, solve problems in that code, dive into those problems. This probably means you won't get anything finished very quickly but it will mean you have a much much much better chance of getting things finished in the future, have an end goal in mind for a project but I wouldn't worry if you don't make it first time, what often happens is: Have an idea for game -> write some code -> find issues in the code -> dive into the issues and really learn -> have another idea for a game -> rinse -> repeat. At some point you need to be finishing things, but, not so much when you're learning, its more important to do some deep dives than skim over some complexity only to get things finished (totally opposite if you're earning money from it). * Ask lots of questions. Find a mentor if you can, but places like this forum can substitute for a human on the end of a phone or face to face. * If there are community JS meetups in your area try to attend them. Try to attend a conference with some topics you're particularly interested in (although this can get expensive). Both of these help to put faces to names and most speakers and people at meetups are very friendly, everyone is in the same boat, or, if they're in a more advanced boat now, they were in your boat before. The coding (and JS in particular) community is an incredible thing, its biggest asset, make use of that and be a part of it. Remember to give back when you make your way to 'Expert Coder' level. * Be wary of that 'Expert Coder' label I just used, its garbage! Always be learning, always be moving forward. This is true of any science but seems to be doubly true of JS and Web programming. * Be determined, its a hard road, lots of problems to solve, but keep going, the hill is steep at first but it flattens out a little as your knowledge improves, then ramps up again.
  32. 1 point

    Drawing an ellipse from 3 points

    Hi @HerryKun! Welcome to the forum. https://www.babylonjs-playground.com/#SI34M#8 Now that we have removed most of the data from @Pryme8's star-system-from-hell, we can more-easily see things. A little diffuseColor, a little emissiveColor, and the fun VolumetricLightScattering (sometimes called VLS or GodRays) feature. Post-processes such as VLS... are actually 2D... not 3D. So, sometimes they have interesting "artifacts" when multiple VLS are active in a single scene... and they overlap (need depth-sorting). I'm not an expert on these things. Lines 32-35 are fun VLS values to play-with, so experiment, experiment, experiment. Make edits to playgrounds, make more SAVES, you can't hurt anything in the playground. If you create an interesting playground save, and you want to talk about it, then paste the URL into this thread so we can all see it (like you did perfectly in your first post), and we'll discuss it and PLAY with it. VLS/GodRays are a pretty nice feature, eh? I love 'em. I hope I've been helpful.
  33. 1 point
    Good one. Looking forward for the release, hopefully things went well for you and your team.
  34. 1 point

    full game example

    hello everyone. i'm new to pixi.js. The only source examples i know is http://pixijs.github.io/examples/ But not enough. Where can i find more complete examples . I want some circular life game source code as tutorial. Can anyone tell me ><??
  35. 1 point

    Swipe effect (Slide Box) in Phaser

    Hi guys, This is my example: http://codepen.io/jdnichollsc/full/ZGoNKg/ What do you think? Regards, Nicholls