Search the Community

Showing results for tags 'js'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 95 results

  1. Part 7 is here, concluding our series: https://loonride.com/learn/phaser/slither-io-part-7 Check out the demo: https://loonride.com/examples/slither-io/slither-io/ Thanks for the support throughout the series! Let me know if you want to see more tutorials like these ones.
  2. Hello all, I apologize in advance if this question has been asked and answered N times already, but I have searched through the forums, and slogged through the vastness that is Google, and haven't quite come up with an opinionated-enough answer that influences my desires. My (simple) question is this: What is my best option for implementing UI elements in a Babylon.js-based web game? My (more complex) question is: Given that I want to provide (1) performant (2) support for responsiveness (handheld, tablet, computer) in a user interface which (3) allows for things like multiply-layered (e.g. controls over render-texture over background) UI widgets, (4) text rendering similar to DOM capabilities, that (5) integrates well with Babylon.js, and (6) is currently supported/actively developed, what are my actual options? (1) my options are DOM (slow), canvas (better) and WebGL (best) (2) can be influenced by media query-alikes in order to support different devices (3) not sure, this sounds like custom witchcraft (4) why not just use DOM?? (5) bGUI :-) (6) Not bGUI :-( I've built a UI library in the past, so the concepts are not foreign to me. But since I'm in the research phase for my own project, I figured I would reach out to the BJS community, and perhaps spark an A vs. B flame war. (Kidding!) Any thoughts are welcome, so please fire at will
  3. In the game "Monster Wants Candy," I see this in the source code, and I was wondering why this was done. I've tried doing this myself but keep failing. This is what I mean: var Candy = {}; Candy.Boot = function(game){}; Candy.Boot.prototype = { preload: function(){ // preload the loading indicator first before anything else this.load.image('preloaderBar', 'img/loading-bar.png'); }, create: function(){ // set scale options this.input.maxPointers = 1; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); // start the Preloader state this.state.start('Preloader'); } }; (source: https://github.com/EnclaveGames/Monster-Wants-Candy-demo/blob/gh-pages/src/Boot.js) var gameWidth = 800, gameHeight = 600; var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO), BootState = function () {}, gameOptions = { playSound: true, playMusic: true }, musicPlayer; BootState.prototype = { preload: function () { this.game.load.image('loadingbar', 'assets/images/loadingbar.png'); this.game.load.image('logo', 'assets/images/logo2.png'); this.game.load.script('LoadState', 'js/gamestates/LoadState.js'); this.game.load.script('pollyfill', 'js/lib/pollyfill.js'); this.game.load.script('utils', 'js/lib/utils.js'); }, create: function () { game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas); this.game.state.add('LoadState', LoadState); this.game.state.start('LoadState'); } }; this.game.state.add('BootState', BootState); this.game.state.start("BootState"); I also note that I don't take "Game" as an argument in my game state functions, unlike Monster Wants Candy which has the argument "game" in it's bootstate. Have I been doing something wrong? I'm following most of the tutorials and example code I've seen so far, though I am aware those may not always be good examples of best practice. Thanks in advance for replies and sorry for the long post. I'm a bit of a JS and Phaser noob, I'm mainly just aiming to learn good practice with this project.
  4. Part 6 of my tutorial series on making Slither.io is here! https://loonride.com/learn/phaser/slither-io-part-6 Check out the demo: https://loonride.com/examples/slither-io/part-6/ Enjoy!
  5. Part 5 of our series has arrived: https://loonride.com/learn/phaser/slither-io-part-5 Also check out the demo for this part: https://loonride.com/examples/slither-io/part-5/ In this part you will learn how to add those awesome eyes to your snakes!
  6. Hi guys, I have more info about the game coming soon but would like to start getting help from more people in terms of testing. I'm looking for any flaws here, errors, game play issues, bugs. Some I am aware of from prior testing and still have yet to figure out and resolve although the game should allow you to play through. The game is a simplistic simulator which allows you to build your own arcade, the walls, the machines, the floors, everything. If you've played prison architect or Rimworld you'll probably see the resemblance which I drew inspiration from. The game is planned to work in any browser and any mobile tablet. Sadly a phone version may just be too far away/complex to achieve. At current the game lets you start the tutorial and then continue to play through on the tutorial level. You can pan the camera with W A S D or by touching the edges. [update] Latest Version here: https://jamdonut.com/prod/0.8/ All feedback appreciated, thanks guys. Jammy
  7. Hi, can anybody teach us or help resolve Levrage? How should I resolve that horizontal green bar will rotate around his origin point (origin point is in center of green bar) and push tile on the other side? So that ball push green bar on his side and than bar should push Tile on the other side. Can anybody complete code in playground and teach us how to do this? I decide to prepare more playgrounds (simple models) like tutorials for learning. Here is plaground http://www.babylonjs-playground.com/#1UF7BM#14 I'm not such good in physics but I really would like to learn new things. greetings Ian
  8. Hey, Everyone I'm dying making attempts to scale canvas for high dpi mobiles and get everything work correctly. Problem: When I start Phaser with 100% width/height for canvas it will be created according to css pixel size of device (window.innerWidth/innerHeight). So iPhone 6S for example, gets, 375x667 canvas, but in fact, of course it should be 2x bigger because devicePixelRatio is 2. Result, everything is blurry and not as expected. Ok, I decided to set width and height with devicePixelRatio included and then set CSS size of canvas to 100% of view port. let w = window.innerWidth * window.devicePixelRatio; let h = window.innerHeight * window.devicePixelRatio; let game = new Game(w, h) // And then in style sheet: canvas { width: 100vw !important; height: 100vh !important; } Now, it seems like everything looks perfect and as expected (is it correct way to do it?). But, another problem rises. Seems like after this events.onInputDown do not work correctly. When I click on sprite nothing happens, but in different location click handled. Seems like coordinates of input arena is messed up. Can someone help me this this?
  9. I'm trying to move a canvas object towards a onmousedown position, which gets sent from a user to the server. But my problem is the following: The object on the canvas is only moving a little step towards the delivered position. There must be a problem which could be caused by the dest calculation. Youtube video which shows my problem: https://www.youtube.com/watch?v=XxB1dNsuY38 A jsfiddle with a working example: http://jsfiddle.net/loktar/5d02ooaf/ Code which sends the position from the user to the server and which draws each user on the canvas: <script type="text/javascript"> var ctx = document.getElementById("ctx").getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight - 142; var socket = io(); socket.on('newPositions', function(data) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = "rgb(255,0,0)"; ctx.beginPath(); for(var i = 0; i < data.length; i++){ ctx.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2); } ctx.closePath(); ctx.fill(); }); document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: true}); } document.onmouseup = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: false}); } </script> Part of the app.js code which contains the current position update code var serv = require('http').Server(app); var SOCKET_LIST = []; var PLAYER_LIST = []; var Player = function(id, x, y){ var self = { x: 100, y: 100, id: id, number: "" + Math.floor(10 * Math.random()), mouseMovement: false, maxSpd: 5, radius: 10 } self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } return self; } var io = require('socket.io')(serv, {}); io.sockets.on('connection', function(socket){ console.log('socket connection'); socket.id = Math.random(); SOCKET_LIST[socket.id] = socket; var player = Player(socket.id); PLAYER_LIST[socket.id] = player; socket.on('disconnect', function(){ delete SOCKET_LIST[socket.id]; delete PLAYER_LIST[socket.id]; }); socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); }); setInterval(function(){ var pack = []; for(var i in PLAYER_LIST){ var player = PLAYER_LIST[i]; player.updatePosition(); pack.push({ x:player.x, y:player.y, number:player.number }); } for(var i in SOCKET_LIST){ var socket = SOCKET_LIST[i]; socket.emit('newPositions', pack); } }, 1000/30); Explaination: The following code sends the target position to the server: document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY -ctx.canvas.offsetTop, state: true}); } Then the following code will be triggered: socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); Which will set the player.mouseMovement to true and delivers the targeted x and y cordinates to the player.updatePosition function: self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } I would appreciate any kind of help or suggestions.
  10. Well I don't know what I am doing wrong anymore, and its keeping me up at nights! So if you are a kind soul out there, please, please help me correct my erroneous ways Here is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Tutorial Endless Runner RPG </title> <script src="phaser.min.js" type="text-javascript"></script> <script src="boot.js" type="text-javascript"></script> <script src="preloader.js" type="text-javascript"></script> <script src="level001.js" type="text-javascript"></script> </head> <body> <script type="text-javascript"> window.onload = function () { var game = new Phaser.Game(800, 600, Phaser.AUTO, ''); game.state.add('Boot', Game.Boot); game.state.add('Preload', Game.Preloader); game.state.add('Level001', Game.Level001); game.state.start('Boot'); }; </script> </body> </html> The boot and preloader is pretty much empty, on create they boot the next game state. Which leads up to Level001, where I set the background color to some grey blueish color. However, when I run the application (index.html) through xampp, I get nothing, not a squat. The problem with nothing is that it doesn't even display any sort of errors, which I in-turn interpret as some sort of linker error, like a null pointer or what not that is just fine with running because if there is null send somewhere, it doesn't do anything to begin with. I've tried to move my files, changing the script src, I've tried rewrite my code, I followed guides, red others downfall, yet nothing so far has shed light upon the dank and gloomy code that I've written. I am all out of aces, yet the battle hasn't even begun. Please let me have a fighting chance in this havoc
  11. Hi, I've always enjoyed open world games, rpgs and adventures, and I always thought that a open world game using real world locations would be a great idea, mainly because I love to spend time with google maps just looking at how different places look. After some years thinking about it I finally have something I'm more or less happy with: real world locations, missions, turn-based fights and informal dialogues. I've reached a point where I need feedback about what I've coded until now, I think it is a good idea but I don't know what others think. I would be happy to hear any feedback you have about the game or what you think it would need to be implemented so it could be considered a game is worth investing time on it. It is fully playable using a web browser, responsive to mobile / tablet / desktop, just HTML and JS, no backend yet. You can play the game in http://badassquest.davidmonllao.com, the game's website is its github page https://github.com/dmonllao/badassquest, it is coded as an engine on top of google maps JS APIs and Phaser that allow different stories, sharing the fights and points of interest systems. The game I've linked to is a story I thought would be catchy to start with. Thanks in advance for your feedback.
  12. Inheritance(?) in js question

    Hi, I have been going through a tutorial on recreating FruitNinja (unimportant maybe). I am a beginner in JS with experiance in Java. I need some help or reference where to get it - I have 2 states like this: var FruitNinja = FruitNinja || {}; FruitNinja.JSONLevelState = function () { "use strict"; Phaser.State.call(this); }; FruitNinja.JSONLevelState.prototype = Object.create(Phaser.State.prototype); FruitNinja.JSONLevelState.prototype.constructor = FruitNinja.JSONLevelState; (...) FruitNinja.JSONLevelState.prototype.create = function () { this.create_prefab(prefab_name, this.level_data.prefabs[prefab_name]); }; FruitNinja.JSONLevelState.prototype.create_prefab = function (prefab_name, prefab_data) { if (this.prefab_classes.hasOwnProperty(prefab_data.type)) { do stuff... }; (...) and var FruitNinja = FruitNinja || {}; FruitNinja.LevelState = function () { "use strict"; FruitNinja.JSONLevelState.call(this); this.prefab_classes = { "background": FruitNinja.Prefab.prototype.constructor, (...) }; }; FruitNinja.LevelState.prototype = Object.create(FruitNinja.JSONLevelState.prototype); FruitNinja.LevelState.prototype.constructor = FruitNinja.LevelState; FruitNinja.LevelState.prototype.create = function () { "use strict"; FruitNinja.JSONLevelState.prototype.create.call(this); (...) } Somehow JSONLevelState can access LevelState this.prefab_classe object. I don't understand how. Can I somehow print it to chrome console? Or can someone explain it or point me to some external reference ? I have watched couple of videos on youtube on inheritance in JS but I still don't get it. Please help, Ok Solved. "FruitNinja.JSONLevelState.call(this);" allows dunc from JSONLevelState be called in LevelState object (having access to its variables. Watch https://youtu.be/PMfcsYzj-9M for a complete explanation.
  13. Hi folks, Babylon.js/game dev n00b here. I've started attempting to make a real-time strategy game, similar to Red Alert or Starcraft. So far, I have a bunch of blocks you can create and move around a flat map. I'm just posting this here so I could get your feedback, or suggestions, am I doing anything obviously wrong? https://github.com/ewanvalentine/game-guild Cheers, Ewan
  14. Hello, I would like to know the number of live sprites I have on a game on a given time ? Is it possible? Thanx!
  15. Hello, I'm a web programmer with 3 years of experience (currently a senior developer). I've always been a fan of videogames and now I'm starting learning game development just for fun. Like in any type of development , you always face problems and learn of those. Sharing is the strongest tool to learn, you help other people to prevent/fix mistakes and they help you. What am I looking for?: People like me that is learning to develop games and want to meet other people to make games with them, share experiences, ask&answer questions. How will we organize? I have experience managing large Telegram groups and also creating bots for groups. It is a good starting point since most of the people always carry the phone everywhere and also has a web/desktop application, also Telegram offers us a direct communication without compromising your privacy (you don't need to give real info or phone number to the rest of the group). If we start growing, we can just move to another platform you want (Discord, Slack, whatever is of your preference). Do you have any project scheduled? Yes, I want to build a fun roguelike, here is my current roadmap of the game: I am an artist, can I join? Sure! I'm sure you can learn from us and we can learn from you, Keep in mind that sound artists, level designers, programmers.. work together and they need to understand all the other positions to work properly. Of course this is a flexible diagram, I don't do this as my job and I don't have any deadlines, creating a roadmap just helps me with organization so I don't start wrongly (which with end even worse :P). Have in mind that my only goal is just learning, I'm not in a rush to make money or finding a job Just feel free to contact me if you want to join or if you doesn't like something of my post.
  16. Hi guys may I ask a quick question? I'm working with Phaser and I'm using the module pattern, creating a module that has a prototype of Object.create(Phaser.Sprite.prototype) and creating an instance of that in the main module. The problem is the sprite seems to be created in the main module in the create function but the image of the sprite is not loading and i cant find the problem or set the image. Thanks so much!!
  17. Hey, I am making a program; I made a simple BabylonJS 3D thing to test, in chrome it opens fine, but adding "web browser" in visual studio gives like 10 script errors then loops back, and pressing no a bunch of times just loads the default blue background. Help me please :/
  18. Hi all! Lucky Kat is an award winning mobile-first game studio based in the Netherlands. We have a mission to deliver fun game experiences with a pop-culture twist. We are the creators of mobile hits such as Nom Cat, Sky Chasers, Combo Critters and Grumpy Cat's Worst Game Ever. Our games have been featured worldwide by Apple and Google. Be at the heart of Lucky Kat’s development process creating fun and engaging (mobile) game experiences to users all around the world. We use our own proprietary game engine “Bento” which is based on HTML5 /JavaScript. As a Game Developer you will be dedicated to build games from beginning (prototyping) to the end (launch), while working together with artists and product managers. You create high quality and high performance code, and have a passion for game design. Delivering an outstanding user experience is your top priority. For more info, please go to: http://www.lucky-kat.com/gamedeveloper or send your CV and portfolio to jobs[at]lucky-kat.com
  19. Information window

    Hello. The question is: how to make a window appears when you press the button? P.S. Strongly do not throw slippers, English I have a bad :)
  20. Still working on the Phaser, making your first Phaser game tutorial. I am not familiar with js so the question might be easy. I added 5 baddies as a group after the tutorial and I was trying to make it move and change direction every 1 sec. I used a Direction function to determine the direction for 1 baddie. However, I tried to put the time.event.loop function in my loop of creating baddies, only 1 baddie will move around. Others had a velocity of 0. There's my code.
  21. I am new to Phase and js, I had some problems when doing some additional works after finishing the Making your first Phaser game tutorial. I tried to add 5 baddies in the game, I did it using the same way adding stars in the tutorial. However, I failed to Collide the baddies with the platforms the debugger shows that TypeError: game.physics.arcade is undefined. The player is not collide with the baddies as well I was confused that if I did anything wrong when adding the baddies. The physics system seems doesn't work correctly. Thank you for ur help!
  22. [Solved]Game stopped working

    I was developing a phaser game that is remade from the Zenva Phaser Tutorial. I did some work on it last night, checked it was working and went to bed. Now this morning it isn't working! Instead of me having to explain, my game is https://felixdebug.neocities.org/ no input is working and he no longer collides with floor, in the way I set it up! Please help me. Code is here: https://github.com/NectarineGames/PhaserGame/ Any help appreciated!
  23. Hello. I was looking for someone to work with me in creating a web-game. I am not that experienced but I am a fast learner. My favourite engine is phaser. I have tryed some others... Well it is a way to get some experience and still meet some cool game developers I guess. Anyone?
  24. I am an experienced developer with 10 years of experience. Now I have to develop system based on graph theory and category theory, allowing use in any environment any application complex semantic/semantic legal interaction. With this system i can spread rights as properties on graph structures and to maintain the integrity of any changes. It has now reached the state when I want to use it somewhere. Now we are working on using the system for fast and dynamic management of crm/cms/lms systems. The work is free for me and my friends. Ultimately, we hope to launch many services, games and apps and provide more than half of the functionality in the OpenSource. I want to create a game which would qualify the statement: Strategic (civ, eu4...) Tactic (construction, mining, buttle, minecraft, heroes of the storm...) Open world Generated in real-time environment map and combinations of elements (aka technology) Cross-platform and cross-browser Online Embedded systems to organize tasks and communications, management of teams and hierarchies of subordinates. and more... I know a huge amount of development. I am looking for anyone who would be interested in. I'm looking for those who would like to make the perfect modern, minimalist, material design of map generation, units.. I'm looking for those who would like to develop ideas and to create the mechanics. We are looking for friends for this undertaking. It's free. However, the participation has to some bonuses. I am willing to share all the technology I possess. I am ready to teach if need be.
  25. Game like Imperia

    Hi, what are the best frameworks, technologies for creating online multiplayer strategy games like Imperia online? What is better to use in backend part? js fw or php or something else? I am not familiar with js frameworks so I will be grateful for any advice.