Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 695 results

  1. Hi all, I am working on this game with a friend. We are having an issue when using the phaser-arcade-slopes.min.js. At the point when we go to add the plugin in the create() function it starts loading with a black screen and will then further keep the black screen and nothing seems to happen. We have attempted different statements etc and nothing seems to have worked. If you remove all lines that are commented saying "//Arcade Slopes", the game works perfectly with collision but obviously without the slopes working. The error we get with it when the arcade slopes code is implemented is as follows; Uncaught TypeError: Cannot read property 'x' of undefined(...) It says that this is coming from the phaser.min.js:24. Now if I extend this it takes me further to my JavaScript code which is as follows; var gameFunc = function() {}; var map; var ground; var player; var direction = 'left'; var jumpTimer = 0; var movement; var jumpButton; var bg; gameFunc.prototype = { create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.plugins.add(Phaser.Plugin.ArcadeSlopes); //Arcade Slopes game.physics.arcade.gravity.y = 250; //Arcade Slopes bg = game.add.tileSprite(0, 0, 800, 600, 'background'); bg.fixedToCamera = true; map = game.add.tilemap('level1'); map.addTilesetImage('snow_tiles_32', 'tiles'); ground = map.createLayer('Tile Layer 1'); ground.debug = true; ground.resizeWorld(); //Arcade Slopes game.slopes.convertTilemapLayer(ground, { 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT' }); //End of Arcade Slopes map.setCollisionBetween(1, 34, true, 'Tile Layer 1'); player = game.add.sprite(32, 32, 'penguin'); game.physics.enable(player, Phaser.Physics.ARCADE); //Arcade Slopes game.physics.arcade.enable(ground); player.body.slopes = {sat: {response: 0}}; //workaround for a phaser bug game.slopes.enable(player); player.body.slopes.preferY = true; //stops the player sliding down slopes //End of Arcade Slopes player.body.bounce.y = 0.2; player.body.collideWorldBounds = true; player.body.setSize(20, 32, 5, 16); player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('turn', [4], 20, true); player.animations.add('right', [5, 6, 7, 8], 10, true); game.slopes.enable(player); //Arcade Slopes game.camera.follow(player); movement = game.input.keyboard.createCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update: function() { game.physics.arcade.collide(player, ground); player.body.velocity.x = 0; if (movement.left.isDown) { player.body.velocity.x = -150; if (direction != 'left') { player.animations.play('left'); direction = 'left'; } } else if (movement.right.isDown) { player.body.velocity.x = 150; if (direction != 'right') { player.animations.play('right'); direction = 'right'; } } else { if (direction != 'idle') { player.animations.stop(); if (direction == 'left') { player.frame = 0; } else { player.frame = 5; } direction = 'idle'; } } if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer) { player.body.velocity.y = -250; jumpTimer = game.time.now + 750; } }, render: function() { game.debug.bodyInfo(player, 32, 32); } }; Now once extended, it says the error is coming from my update function's first line; game.physics.arcade.collide(player, ground); I'm not entirely sure what can be the solution here, I have tried multiple different steps and just making it either worse or nothing at all happens. If anyone can be of any help that would be great! I have posted the HTML (index.html) and the preloadJS.js incase. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="JS/libraries/phaser.min.js"></script> <script type="text/javascript" src="JS/libraries/phaser-arcade-slopes.min.js"></script> <script type="text/javascript" src="JS/preloadJS.js"></script> <script type="text/javascript" src="JS/menuJS.js"></script> <script type="text/javascript" src="JS/level1JS.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game'); game.state.add('preloadState', preloadFunc); game.state.add('menuState', menuFunc); game.state.add('gameState', gameFunc); game.state.start('preloadState'); </script> </head> <body> <div id='game'></div> </body> </html> preloadJS.js var preloadFunc = function() {}; preloadFunc.prototype = { preload: function() { this.game.load.tilemap('level1', 'assets/tilemap/tiles.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.image('tiles', 'assets/tiles/snow_tiles_32.png'); this.game.load.spritesheet('penguin', 'assets/sprite/penguin.png', 32, 48, 9); this.game.load.image('ball', 'assets/sprite/ball.png', 30, 20); this.game.load.image('background', 'assets/background/blue.png', 800, 600); }, create: function() { this.game.state.start('gameState'); //Temporary state for testing the game quickly } } Thanks for the help!
  2. Are there any facilities to dynamically load javascript in babylon js... If not what it the recommended way to load javascript from a string? Is window.eval ok to use in a custom scene loader (like objFileLoader.ts)? If i use window.eval to dynamically load javascript, will it be acceptable code to submit to github project?
  3. Hey guys This is another one of my html5 games. It is the first html5 game that i have built using the Phaser framework. I have google analyse code in it but it isnt working. anyone that can help please do. Here is the link. I would appreciate the pointers and positive criticism. Cheers Pheaset
  4. I need to determin which side was hit when collision is performed. I for some reason never can figure it out. It only returns two sides regardless of where it hits. please help! I have been stuck on this forever! function collision(obj1, obj2){ if( obj1.x + (obj1.width/2) > obj2.x - (obj2.width/2) && obj1.x - (obj1.width/2) < obj2.x + (obj2.width/2) && obj1.y + (obj1.height/2) > obj2.y - (obj2.height/2) && obj1.y - (obj1.height/2) < obj2.y + (obj2.height/2) ){ if( obj1.prev_y + (obj1.height/2) >= obj2.y - (obj2.height/2) && obj1.x + (obj1.width/2) > obj2.x - (obj2.width/2) && obj1.x - (obj1.width/2) < obj2.x + (obj2.width/2) ){ return 'bottom'; } else if( obj1.prev_y - (obj1.height/2) <= obj2.y + (obj2.height/2) && obj1.x + (obj1.width/2) > obj2.x - (obj2.width/2) && obj1.x - (obj1.width/2) < obj2.x + (obj2.width/2) ){ return 'top'; } else if( obj1.prev_x + (obj1.width/2) > obj2.x - (obj2.width/2) && obj1.y + (obj1.height/2) > obj2.y - (obj2.height/2) && obj1.y - (obj1.height/2) < obj2.y + (obj2.height/2) ){ return 'right'; } else if( obj1.prev_x - (obj1.width/2) < obj2.x + (obj2.width/2) && obj1.y + (obj1.height/2) > obj2.y - (obj2.height/2) && obj1.y - (obj1.height/2) < obj2.y + (obj2.height/2) ){ return 'left'; } } }
  5. I can't understand why this is happening so please help me out. For some reason when i run this program at my home PC it will load a black screen. When I load the exact same files on a PC at my University it will run normally from using those exact files where it DID NOT work at my home PC. If anyone could shed some light into why this error is there and give a fix it would be great. Error: Uncaught TypeError: Cannot read property 'x' of undefined(…) P.s All files included in the ZIP. Test Game Phaser.rar
  6. Hey Guys. Im currently working on a Breakout game using Phaser so that i get used to the framework. I was wondering if anyone knows how to add tempory text to a canvas or webgl for a win/lose screen. Thanks in advance Pheaset
  7. I realised today, that I'd been working on my game much in the same way as the Phaser examples, and I had a question about best practice for variables. As per the examples, I tend to declare varaibles at the top, which is fine apart from 2 things, firstly this makes them globally available, secondly it makes them a little difficult to access dynamically (I end up using window["dyn_var_"+n] etc.) But, I have also add vars to the game function like this: Game.Play = function (game) { this.player1 = []; this.numBalls = 6; }; which means they are accessible throughout the Play state. But, I wondered if there was another way, a better way, or what was generally considered best (or maybe better) practice?
  8. Hi guys, I would like make a dos-look-style game using javascript. Can you suggest me what kind of library should I use? Tnx
  9. I've been programming for a few years now, and started writing javascript several months ago. I'm writing a web game in C# and javascript using SignalR and Fabricjs. If I could chat with a web dev guru, I would have an annoying number of questions. This is mainly because I'm completely self-taught and uncertain that I'm doing things the right way, or rather, that I'm not doing things the wrong way. I'm here to ask for general guidance about my code. I'm not asking for anyone to try to find bugs, but rather, I'm asking for a more experienced developer to let me know if there is something which is obviously a bad practice in my code. Here is my GitHub repo: https://github.com/Rydez/SignalRApp Here is the live app: http://Www.rmmelendez.com/justforfun Thanks to anyone who takes the time to help. P.S. Please use Chrome or Firefox
  10. Dakara Online is a medieval MMORPG made using PIXIjs, jqueryui, howlerjs and much more. The source code is available, the client is released under the MIT license and the server under the GPL. Its based on an argentinian MMORPG called Argentum Online. GAME LINK: http://web.dakara.com.ar/ SOURCE CODE LINK: https://github.com/horacioMartinez/dakara-client
  11. This is a bit of a simple question I feel, but I have been struggling to get it right for a while. I am using super simpler AABB collision in my rect based game. I have a bouncing rect which behaves funny when it collides with the player, who is also a rect. The ball 'sticks' and bounces a bit inside the player before bouncing away. I don't have gravity at the moment, or any advanced collision logic. All I am doing is inverting the x or y vectors based on whether the bouncing ball hits the top or sides of another rect. I feel like to resolve this issue I should get the displacement value from the overlapping rects and then 'push' the overlapping rect (the ball in this case) away from the second rectangle by using the displacement value as a positive offset. To do this I feel like it would be cleaner to separate the collisions to different sides, or corners? Does anyone have any experience in implementing a slightly more advanced version of AABB?
  12. pheaset

    View Counter

    Hey Guys, I was wondering if anybody knew how to add a view counter. I want to know how many views my breakout game will get when it is launched and the same for my other tennis game. Help is really appreciated Pheaset
  13. Hello all, i've seen some solutions for my problems, yet i still looking for some enhanced solution. I need my game to resize and it should not lose the screen proportions. however, i have every sort of screen to deal with, and some of them cuts off the bottom of my game. i am using it for resize: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setScreenSize(true);#game { width: 100%;}Would be nice to find a way to make sure that there is enough height on screen so scale manager could respect that.
  14. I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue. HTML var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer('collision'); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 2: 'FULL', 3: 'HALF_BOTTOM_LEFT', 4: 'HALF_BOTTOM_RIGHT', 6: 'HALF_TOP_LEFT', 5: 'HALF_TOP_RIGHT', 15: 'QUARTER_BOTTOM_LEFT_LOW', 16: 'QUARTER_BOTTOM_RIGHT_LOW', 17: 'QUARTER_TOP_RIGHT_LOW', 18: 'QUARTER_TOP_LEFT_LOW', 19: 'QUARTER_BOTTOM_LEFT_HIGH', 20: 'QUARTER_BOTTOM_RIGHT_HIGH', 21: 'QUARTER_TOP_RIGHT_HIGH', 22: 'QUARTER_TOP_LEFT_HIGH', 23: 'QUARTER_LEFT_BOTTOM_HIGH', 24: 'QUARTER_RIGHT_BOTTOM_HIGH', 25: 'QUARTER_RIGHT_TOP_LOW', 26: 'QUARTER_LEFT_TOP_LOW', 27: 'QUARTER_LEFT_BOTTOM_LOW', 28: 'QUARTER_RIGHT_BOTTOM_LOW', 29: 'QUARTER_RIGHT_TOP_HIGH', 30: 'QUARTER_LEFT_TOP_HIGH', 31: 'HALF_BOTTOM', 32: 'HALF_RIGHT', 33: 'HALF_TOP', 34: 'HALF_LEFT' }); this.map.setCollisionBetween(2,34, true, 'collision'); //player this.player = this.game.add.sprite(100,50,'player'); this.game.physics.arcade.enable(player); this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 2000; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && player.body.onFloor()){ this.player.body.velocity.y = -350; } } Test Game Phaser.rar
  15. The previous time I worked on this project it would load no problem within the browser, now I get the error Uncaught TypeError: Cannot read property 'x' of undefined and it says it's coming from phaser.min.js:24 which isn't making sense to me. var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var cursors; //var snowballs; //var sTime = 0; //var fireButton; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer(0); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT', }); this.map.setCollisionBetween(1, 34, true, 0); //player this.player = this.game.add.sprite(100, 50, 'player'); this.game.physics.arcade.enable(this.player); this.player.body.slopes = {sat: {response: 0}}; // workaround for a phaser bug this.game.slopes.enable(this.player); this.player.body.slopes.preferY = true; // stops the player sliding down slopes this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 700; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true); //this.snowballs = game.add.group(); //this.snowballs.enableBody = true; //this.snowballs.physicsBodyType = Phaser.Physics.ARCADE; //this.snowballs.createMultiple(1, 'snowball'); //this.snowballs.setAll('anchor.x', 0.5); //this.snowballs.setAll('anchor.y', 1); //this.snowballs.setAll('outOfBoundsKill', true); //this.snowballs.setAll('checkWorldBounds', true); //this.fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && (this.player.body.onFloor() || this.player.body.touching.down)){ this.player.body.velocity.y = -350; } //if(fireButton.isDown){ //this.fireSnowball(); //} //} //function fireSnowball(){ //if(game.time.now > sTime){ //this.snowball = snowballs.getFirstExists(false); //if(snowball){ // this.snowball.reset(player.x+30, player.y+30); //this.snowball.body.velocity.x = 400; //this.sTime = game.time.now = 10; // } //} } Test Game Phaser2.rar
  16. Hello, A complete newbie here. So, I selected my project within 3 weeks as " Mario like game with level editor" for my college and can only use plain javascript and nothing else. I have done some research and i found that i have to make it on canvas. My logic was to first create a json data and render the map from that and make it playable. Then make an editor where the user can drag and drop tiles which after finished creates a json data, from which the game can render from. But, how do i start on this? Any guidance? How do i render the json and provide collision detection. Also, how to let user create their own level and create the json data. Help is much appreciated, Thank you!
  17. I am developing one application (platform) where I have 10 users (maybe this will increase with time). I have created one login page and created one map using tiled (phaser framework). But this map is now same for all users, What I want is to create a separate map for every user and that will be visible after login. Please give me some suggestion so that at least I can try. Or give some idea for this implementation. Thank you !
  18. I wrote an article titled You already know Flash, so JavaScript is easy. One important thing I missed was how easy it is to animate things in Flash compared to JS. So might have to share what I learned there later. I'm wondering what else did I miss. I need feedback, what would you say to convert Flash developers to HTML5?
  19. visual js API examples help - Take a look : -Add new game Object with single image: https://jsfiddle.net/zlatnaspirala/rjf0xe0a/ -Use For loop for creating objects https://jsfiddle.net/zlatnaspirala/noax17kz/ -Visual JS -Add Webcam to Object https://jsfiddle.net/zlatnaspirala/xsffd9v6/ -Add webcam with motion detect https://jsfiddle.net/zlatnaspirala/j60hh052/ -ZoomIn/ZoomOut game_object effect https://jsfiddle.net/zlatnaspirala/pjjow5q6/ -Translate object https://jsfiddle.net/zlatnaspirala/0tt6rmnq/ -Rotate object ( OSCILLATOR class ) https://jsfiddle.net/zlatnaspirala/1x7bq0gf/ -Add particle https://jsfiddle.net/zlatnaspirala/hoe9auLm/ -Add textbox https://jsfiddle.net/zlatnaspirala/0u5j1ap8/ view all at : https://jsfiddle.net/user/zlatnaspirala/fiddles/ slot demo: https://maximumroulette.com/framework/ Source : https://bitbucket.org/nikola_l/visual-js creator : Nikola Lukic about : Visual JS 2d canvas multiplatform game engine This is JavaScript game engine (server part node.js / client part js) Js framework with windows GUI editor and game instance creator. **Basic licence rules :** 1) Each file in this project has its own license , be careful , do not violate the basic rules. 2) You are free to use any version of Visual JS library in any other project (even commercial projects) as long as the copyright header is left intact Except for plugins on sale and graphics that come with them (they have special commercial licence). 3)Please read the following terms and conditions before using this application: Disclaimer of warranty 'Visual js' is provided "as-is" and without warranty of any kind, express, implied or otherwise, including without limitation, any warranty of merchantability or fitness for a particular purpose. In no event shall the author of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software. External licences in this project : Webcam NUI control is under : Created by Romuald Quantin.http://creativecommons.org/licenses/by-nc-sa/3.0/ Download from : https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html WEBRTC - webcam communication is under : Creator Muaz Khan www.MuazKhan.com MIT License - www.WebRTC-Experiment.com/licence Experiments - github.com/muaz-khan/WebRTC-Experiment Installation and setup : In server Instance folder (navigate to server_instance/) 1) Install next modules : In node.js command prompt or console enter next installation command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 Setup config.js You will find config.js in server_instance folder : (All node.js application you can find in same folder (server_instance) . Some app have local usage ) module.exports = {VERSION : "0.5", PATH_OF_NODE_APP : "D:/PATH_TO_SERVER_INSTANCE_FOLDER/server/" , // EDIT HERE PATH_OF_WWW : "D:/xamp/htdocs/project_instance/", // PATH_TO_WWW EDIT HERE EDITOR_PORT : "1013", REG_PATH : "users/", ACCOUNT_PORT : 3666 , DESTROY_SESSION_AFTER_X_mSECUNDS : 20000, }; }; This is all . CLIENT OR WEB APPLICATION # How to start : 1) Copy project_instance/ folder to the www folder or use visual-js.exe and create new application (select folder for www and server path). 2) start server_instance/editor.js 3) In browser navigate to project-instance folder (index.html) Click right button and you will see content menu . First item is **Add New game object** . Than your game objectn will show at web page. Right click on rectangle area to see game object cantent menu. **local node.js application tools** ( *Use this in develop mode only* ): # - server_instance/res.js - create RESOURCE js object ( ADD image or images for animation ) put image or images in one folder for example TEST_RES/ . Put that folder in this location **project_instance/res/** . run server_instance/node res.js After finishing restart web page ind enter in console RESOURCE.TEST_RES RESOURCE have all images path data. When you create folder with image and build with *node res.js* we did not create images object. Images object will be created after you add animation to the game objects. This is good because memory safe. - server_instance/editor.js create game objects direct in web browser view.
  20. Hello all After my previous tutorial on how to develop ZigZag Game using Cocos2d-x cpp! I created another tutorial this time same game but using cocos2d-x JavaScript API . There i list why should developer consider to use the JavaScript API and what benefits he/she can to earn. I used Microsoft Visual Studio Code IDE for the Javascript dev and i must say it is very good tool. Here is the tutorial : http://www.gamedevcraft.com/ Happy JavaScript Game development !
  21. I need some help to optimize algorithm. I have a matrix of sprites and I am highlighting a part of it. It can be rectangle or square it doesn't matter. I need to hide all sprites of this matrix that do not belong to the given area. I have this function which is highly non-optimized i.e 4 nested "for" cycles: hideMatrixArea: function(slotTwoDimArray, row, col, numRows, numCols) { var i = 0, j = 0, k = 0, t = 0, matrixWidth = slotTwoDimArray.length, matrixHeigth = slotTwoDimArray[0].length; for (i = 0; i < matrixWidth; i += 1, k += 1) { for (j = 0; j < matrixHeigth; j += 1, t += 1) { for (k = row; k < row + numRows; k += 1) { for (t = col; t < col + numCols; t += 1) { if (!(k === i && t === j)) { console.log("hello"); this.hideSlot(slotTwoDimArray, i, j); } } } } } return slotTwoDimArray; }, It prints "hello" 15600 times which is a lot. How can I hide slots that are not in the space (row, col) -> (row + numRows, col + numCols) i.e the inverse without using nested "for" loops? Any ideas?
  22. Hello gamedevs! Just posting to show off my JS13k entry, Super Glitch Box. An homage to one of my favorite freeware games, it features fun glitchy visuals, stereo sound effects, original music and procuedurally generated weapons. http://js13kgames.com/entries/super-glitch-box
  23. Hey, please can someone give me a step by step guide on how to use mighty editor locally on my computer without Internet. I don't really understand the guide on the github repo.
  24. Hello all I have a weird scenario where i am stuck. I currently have 2 images that are used as textrue and i load both onto 2 planes where they show on the same side. Now i need to kind of show 2 different planes or a double sided plane where each side has its own image or texture. Please look at the code that i have. For some reason the plane and plane2 show fine but plan3 and plane4 do not show up var scene = new BABYLON.Scene(engine); //Create an Arc Rotate Camera - aimed negative z this time var camera = new BABYLON.ArcRotateCamera("Camera", -2.5, 1.2, 350, BABYLON.Vector3.Zero(), scene, true); camera.attachControl(canvas, true); //Create a light var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 0, 1), 0.8, 2, scene); spot.diffuse = new BABYLON.Color3(1, 1, 1); spot.specular = new BABYLON.Color3(1, 1, 1); spot.intensity = 1; spot.position = new BABYLON.Vector3(0, 0, -500); // spot.setDirectionToTarget(new BABYLON.Vector3(0, 0, 0)); spotcone = BABYLON.Mesh.CreateCylinder("cone", 16, 12, 0, 8, 0, scene); var conemat = new BABYLON.StandardMaterial("cone", scene); conemat.diffuseColor = new BABYLON.Color3(0, 0, 2); spotcone.rotation.x = Math.PI/2; spotcone.bakeCurrentTransformIntoVertices(); spotcone.material = conemat; spotcone.parent = spot; var sURL = "images/scodix1.jpg"; var materialPlane = new BABYLON.StandardMaterial("solid", scene); materialPlane.diffuseTexture = new BABYLON.Texture(sURL, scene); // materialPlane.emissiveTexture = new BABYLON.Texture(sURL, scene); //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene); //materialPlane.useAlphaFromDiffuseTexture materialPlane.specularColor = new BABYLON.Color3(0, 0, 0); materialPlane.backFaceCulling = true;//Allways show the front and the back of an element // materialPlane.emissiveTexture.level = 1; // powerfulness var tURL = "images/scodix1.png"; var spotPlain = new BABYLON.StandardMaterial("transp", scene, true); spotPlain.diffuseTexture = new BABYLON.Texture(tURL, scene); spotPlain.anisotropicFilteringLevel = 0; spotPlain.diffuseTexture.hasAlpha = true; spotPlain.useAlphaFromDiffuseTexture; spotPlain.hasAlpha = true; spotPlain.specularColor = new BABYLON.Color3.FromHexString("#ffffff"); spotPlain.backFaceCulling = true; // Always show the front and the back of an element var sURL2 = "images/scodix2.jpg"; var materialPlane2 = new BABYLON.StandardMaterial("solid2", scene); materialPlane2.diffuseTexture = new BABYLON.Texture(sURL2, scene); // materialPlane.emissiveTexture = new BABYLON.Texture(sURL, scene); //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene); //materialPlane.useAlphaFromDiffuseTexture materialPlane2.specularColor = new BABYLON.Color3(0, 0, 0); materialPlane2.backFaceCulling = true;//Allways show the front and the back of an element // materialPlane.emissiveTexture.level = 1; // powerfulness var tURL2 = "images/scodix2.png"; var spotPlain2 = new BABYLON.StandardMaterial("transp2", scene, true); spotPlain2.diffuseTexture = new BABYLON.Texture(tURL2, scene); spotPlain2.anisotropicFilteringLevel = 0; spotPlain2.diffuseTexture.hasAlpha = true; spotPlain2.useAlphaFromDiffuseTexture; spotPlain2.hasAlpha = true; spotPlain2.specularColor = new BABYLON.Color3.FromHexString("#ffffff"); spotPlain2.backFaceCulling = true; // Always show the front and the back of an element var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 261, height: 153, sideOrientation: 2}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane.position = new BABYLON.Vector3(0, 0, 0.5); plane.material = materialPlane; var plane2 = BABYLON.MeshBuilder.CreatePlane("plane2", {width: 261, height: 153, sideOrientation: 2}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane2.material = spotPlain; var plane3 = BABYLON.MeshBuilder.CreatePlane("plane3", {width: 261, height: 153, sideOrientation: 1}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane3.position = new BABYLON.Vector3(0, 0, 0.5); plane3.material = materialPlane2; var plane4 = BABYLON.MeshBuilder.CreatePlane("plane4", {width: 261, height: 153, sideOrientation: 1}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane4.material = spotPlain2; var alpha = Math.PI; scene.beforeRender = () => { } return scene;
  25. Hi, I have implemented a simple Observer Pattern library in TypeScript/JavaScript which does not require inheritance. I have called it Paon (French name for a bird with many "eyes" on its feathers). It is available in my GitHub and in npm. Any feedback would be greatly appreciated. Paon An Observer Pattern Component in TypeScript/JavaScript. No dependencies. No inheritance is required. Observable is just a component inside an object. Observers are just functions. Installation npm install paon To compile the TypeScript source to JavaScript, you would need to install the TypeScript compiler: npm install -g typescript To generate the minified JavaScript version when building, you would need to install uglifyjs: npm install -g uglifyjs Build Resulting files are created in the dist/ folder. Complete build (compilation and minification): npm run build Simple compilation (no minification): npm run compile Usage All constants, interfaces, classes and functions are accessible inside the Paon namespace. Simple example Here is a simple example where we add an observable component inside a class Subject: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged"); // A message is sent to observers return this.name; } } function onNameChanged() { alert("Name has changed"); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed" Above, in the class Subject, the method changeName() will send a "nameChanged" message to the instance's observers. After the instanciation of Subject, the function onNameChanged() subscribes to subject's messages "nameChanged". Therefore, when changeName() is called, an alert popup appears. As we can see, with such a pattern, no inheritance with extends or implements is required. Just simple composition. Example with extra data We can send extra data to observers as we can see below: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return this.name; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " + msg.data); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" The parameter msg in function onNameChanged() contains the extra data we have sent via method changeName(). Here, this is an object with a property data, but this could be anything. Module Importation This library can also be imported as a module with the import statement: import Paon from "./paon"; // Declaration file .d.ts location class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { this.name = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { this.name = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return this.name; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " + msg.data); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" Only the import statement differs from previous examples. Otherwise, the code is the same. API Documentation Add an observer to a type of message (similar to the DOM function addEventListener()): Paon.Observable.addObserver(type: string, observer: Observer): Observer; Remove an observer from a type of message (similar to the DOM function removeEventListener()): Paon.Observable.removeObserver(type: string, observer: Observer): void; Remove all observers from a type of message: Paon.Observable.removeObserversType(type: string): void; Send a message to observers (similar to the DOM function dispatchEvent()): Paon.Observable.notifyObservers(type: string, msg?: any): void; Contributors yahiko Licence MIT