Help-me

[LuisM]

Hello everyone ! I'm new to javascript. yet I have done some scenes in babylonjs!

and I have two questions about

I did a scene for training in order to better understand the babylonjs engine.

and with this code:

var moveLeft = false, moveRight = false;
    
    window.addEventListener("keydown", function(e) {
                if (e.keyCode == 65) { // A or Q65 || e.keyCode == 81
                    moveLeft =true;
                    moveRight = false;
                    } else if (e.keyCode == 68) { // D
                    moveLeft = false;
                    moveRight = true;    
                }
            });//agora um negativo - como ta em escuta.
            
            window.addEventListener("keyup", function(e) {
                if (e.keyCode == 65) { // A or Q || e.keyCode == 81
                    moveLeft = false;
                } else if (e.keyCode == 68) { // D
                    moveRight = false;    
                }
            });

moves a cube  and when it moves to the pressing example the letter 'A'.

the browser takes this action as well and open a search bar like to know how do I that after charging a tight keys scene to be captured or something. sorry no idea how to do it.

the second question, stupid means someone here already developing a game or something and published for android? how did you do it ? phonegap?

what is the best way?

[Wingnut]

Hi again.  For first issue... see THIS playground... line 348.

window.addEventListener("keydown", onKeyDown, false);

Can you see where to put them into your addListeners ?  Sure you can.  Good luck.

Don't forget your new best friends... playground search, BJS docs site, and forum search.

Second question still open, fellow helpers.

[LuisM]

Thanky you ! I do not understand very well but it has to do with this function.

[Wingnut]

    window.addEventListener("keydown", function(e) {
                if (e.keyCode == 65) { // A or Q65 || e.keyCode == 81
                    moveLeft =true;
                    moveRight = false;
                    } else if (e.keyCode == 68) { // D
                    moveLeft = false;
                    moveRight = true;    
                }
            }, false);  // <-- here
            
            window.addEventListener("keyup", function(e) {
                if (e.keyCode == 65) { // A or Q || e.keyCode == 81
                    moveLeft = false;
                } else if (e.keyCode == 68) { // D
                    moveRight = false;    
                }
            }, false);   // <-- here

See the 2 added 'false' with comma?  I think that will stop keypress event "propagation".  Read on web about it, too.  It is a DOM thing, not really BJS.

Perhaps you will need this, or similar, too...

scene.beforeRender =()=>{
    if (moveRight) { mymesh.position.x += .01 }
    else if (moveLeft) { mymesh.position.x -= .01 }
}

[LuisM]

You see ! Thank you gave me a light xD

as the false. it was an error when sending the message it n this in code.

people like you generate more programmers.

3 days seeing javascript I still have a lot to learn. kkkkkk.

learn a bit of python and c, and now I'm trying to learn javascript and babylon API.

and their response is an incentive I'm kind of just going and doing comprising sorry and uncomfortable.

[LuisM]

Not solve it do not understand anything about the widnows.addEve... ou DOM ! I use this code..

 

var moveLeft = false, moveRight = false;
    
    window.addEventListener( "keydown", function(e){ 
    if (e.keyCode == 65) { // A or Q65 || e.keyCode == 81 
                    moveLeft =true;
                    moveRight = false;
                    } else if (e.keyCode == 68) { // D
                    moveLeft = false;
                    moveRight = true;    
                }
            });    
            window.addEventListener("keyup", function(e) {
                if (e.keyCode == 65) { // A or Q || e.keyCode == 81
                    moveLeft = false;
                } else if (e.keyCode == 68) { // D
                    moveRight = false;    
                }
            });

            
            scene.registerBeforeRender(function() {
                if (moveLeft) {
                    Player.position.x -= .05;            
                } else if (moveRight) {
                    Payer.position.x += .05;            
                }
            });

                return scene;
            }

 
            var scene = createScene();
 
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
        });
    </script>
</body>
</html>

 

it moves up when I press the keys as defined want but. while the search bar of Firefox open taking the focus of the app.

if anyone has any solution! THX.

[Wingnut]

Hi again.  I see mistakes, again.  "Payer"?  And where are your ", false" at ends of addEventListener calls?  (just before last parentheses in both)

You seem to have forgotten those.  Here, try this...

http://playground.babylonjs.com/#B2T7K3

Work ok?  

For me, works perfect in Firefox.  No Firefox searcher, not loss of focus.

Perhaps get the .Zip of this playground?  Good luck.

[LuisM]

Our your code is better I will use! more about the browser steal focus or open bar to search by pressing a letter keeps happening!

I test my direct application in firefox not use playgroundla all work well. more when you take the same code and saved in a index.html.

in chrome 3d models do not appear in firefox and everything works very well, import functions.

there examples in babylonjs.com to open normally when using keyboard firefox does not steal the focus or open the search bar. some of them even warns that one should press ESC to the mouse.

 

THY xD

[Wingnut]

Hi again, Luis!  You may wish to read about 4 event things.  event.preventDefault(), event.stopPropagation(), event.stopImmediatePropagation(), and return false.

I think return false method MIGHT work for you.

Some reading here:  http://www.markupjavascript.com/2013/10/event-bubbling-how-to-prevent-it.html

More reading here:  http://stackoverflow.com/questions/30473581/when-to-use-preventdefault-vs-return-false

Lots more reading:  Search web. 

One more thing:  http://playground.babylonjs.com/#B2T7K3#2

Notice that I used canvas.eventListener and NOT window.eventListener, in that demo.  Perhaps that works better?  Not sure.

Also, noticed that I am using all 4 event things... inside the onKeyDown(e) and onKeyUp(e) event handlers.

Keep trying, you will succeed.  I know it. 

[LuisM]

Yes I will study more about events.

Thank you for answering! I decide to learn javascript. already I can do some things and know how to work more or less this language.

after your help I realized I need to learn more about some javascript things and then start using babylonjs.

My intention was to create a control script! I want to make a game and I do not quite know how to add controlle a character with animations. as walking, running, etc.

alone so get this.

<body>
   <canvas id="renderCanvas"></canvas>
   <script type="text/javascript">

      var canvas = document.querySelector("#renderCanvas");
      var engine = new BABYLON.Engine(canvas, true);
      var createScene = function () {

         var scene = new BABYLON.Scene(engine);
         var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 25, -10), scene);
         camera.setTarget(BABYLON.Vector3.Zero());
         camera.attachControl(canvas, false);
         var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
         light.intensity = .5;

         BABYLON.SceneLoader.ImportMesh("", "assets/", "wall-chao.babylon", scene, function(newMeshes) { 
chaodeleg = newMeshes[0];
chaodeleg.position.y = 1;
chaodeleg.material = materialChao;
});

BABYLON.SceneLoader.ImportMesh("", "assets/", "wall-deleg.babylon", scene, function(newMeshes) { 
walldeleg = newMeshes[0];
walldeleg.position.y = 2;
});
var materialChao = new BABYLON.StandardMaterial("texture1", scene);
materialChao.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);

BABYLON.SceneLoader.ImportMesh("", "assets/", "player.babylon", scene, function(newMeshes) { 
Character1 = newMeshes[0];
Character1.position.y = 4;
});
      
            var moveLeft = false, moveRight = false;
            var moveFrente = false, moveTras = false;
            
            var onKeyDown = function(e){ 
               var code = e.keyCode;
              switch (code) {

             
                case 65:
                    moveLeft = true;
                    moveRight = false;
                     break;
                case 68: 
                    moveLeft = false;
                    moveRight = true; 
                     break; 
                     
                case 87:
                moveFrente = true;
                moveTras = false;
                break;    
                
                case 83:
                moveFrente = false;
                moveTras = true;
                break;                
                     
                     }    
            }; 
            
            var onKeyUp = function(e){ 
                if (e.keyCode == 65) { 
                    moveLeft = false;
                } else if (e.keyCode == 68) { 
                    moveRight = false;    
                } else if (e.keyCode == 87) {
                    moveFrente = false
                }
            }; 

                switch
                }
                
                
                 
                 case
                 
                 break;*/             
            scene.registerBeforeRender(function() {
               if (moveLeft) {
                    Character1.position.x -= .07;            
                } else if (moveRight) {
                    Character1.position.x += .07;            
                } else if (moveFrente) {
                Character1.position.z += .07; 
                }
            });
        
        
            window.addEventListener("keydown", onKeyDown, false);        // notice these falses
            window.addEventListener("keyup", onKeyUp, false); // notice these falses
        
            scene.onDispose = function () {
                window.removeEventListener("keydown", onKeyDown);
                window.removeEventListener("keyup", onKeyUp);
            };
         return scene;
      };
      var scene = createScene();
      engine.runRenderLoop(function () {
         scene.render();
      });
      window.addEventListener("resize", function () {
         engine.resize();
      });
   </script>

===================

This script! just have a problem can not cause it to identify when the letter 'W' and released as well as using the 'A' and 'D'.

[Wingnut]

Hi Luis.  Around here, we work with playgrounds... so everyone can help more easily.

The playground demo(s) that I have provided don't use mesh importing.  Please adjust my playground demo, and make more SAVES, and try to make W key fail in same way.  Work on keypresses only, not animation, not importing.  Make playground that says "W key pressed" on browser JS console... when W key is pressed, or when A, S, D keys are pressed.  

No animation running, no mesh importing... just checking keypresses with console.log() reports.  Simple playground, testing ONLY your keypress system.

Do ONE problem at a time, so others can SEE problem happen, fast and easy... in your new playground demo that shows problem to all forum helpers.  Also good for YOUR JS learning. 

First, we test keypresses.  THEN... we move-forward to basic animating.  THEN, we try importing mesh.  Step by step, not in-hurry to make game.

Be patient with yourself, and keep forum helpers happy with you... by making playgrounds that show your problems.  (thx)

Why paste entire webpage into forum, when instead, you can paste createScene() function into playground?  Better.

Then run, adjust, run, adjust, save playground.  THEN... send forum the URL to that playground.  The new URL is given to you by playground AFTER THE SAVE. 

Then we can all see and run your code... in the playground.  Easy for us to find problem, that way.

Don't forget to learn from OTHER playgrounds.  Here is playground search for sceneLoader.importMesh.  MANY examples!  Some of them use WASD keys.  Playground search... search in code (right-side input box) is a wonderful way to find code JUST LIKE YOURS.  Search for keywords that are found in YOUR code... such as... ' e.keyCode == 87'.  I think there are MANY playground demos with 'e.keyCode == 87' in them, and you can learn from them. 

It is important to learn HOW to help yourself.... using Babylon website/playground search tools.

Good schools teach HOW TO FIND answers, and do not always teach the actual answers.  There are too many answers to teach.

Learning terms/terminology (the words used-for 3D and JS things) is a great early learning step. 

Be patient, it takes time and practice.  I think you are doing fine... getting better and better... good job.  Soon you will own a software company. 

Playground error system will help you find MOST problems.  When not, forum helpers are here to help.  Thanks! 

[LuisM]

Sorry for being immature! You're right, I will do as you say Thank you xD.

[Wingnut]

You're not being immature, really.  Perhaps you are trying to go really fast, though.   

We ALL like having helper person nearby.  We forum helpers do our best, but sometimes we are doing many things, and can't be good helpers.  That is when you must become investigator/detective, and dig for clues to solve your issue. 

Playground searcher... search-in-code input box... is really really wonderful.  It is a friend.  I use it often.  I think there are about 80,000 playground demos stored in the playground database.  It is a giant bucket of smartness, eh?  *nod*   Forum searcher is wonderful, too.  Docs site, with searcher in upper-right... is fantastic, too.

I keep those three links... on my browser quick-links bar, or on a local browser-start web page.  Keep them close-by - they are good friends.

Question:  Is your game... pushed by a deadline?   Perhaps, are you in 3D graphics school, and "final project" must be completed soon?  If so, maybe we can go faster.  Let me know if you have deadline, and I will TRY to help you go further, faster. 

Be well, and don't worry.  If research/investigation fails, reproduce a playground demo of issue, if possible, and then ask the forum for helpers (and show us playground URL where problem can be viewed).  We can help people fast and easy, when issue can be seen in playground demo... or even in JsFiddle demo. 

I hope I didn't hurt your feelings.  I like you, Luis... you have good brain and spirit.  Soon, YOU will be helping others, I think.  Keep smiling.

[LuisM]

Thank you ! really was going too fast. I do not have a deadline.