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
    • 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 632 results

  1. About MGN Studios: MGN Studios is the new game development division of Freedom! Family Limited. Our mission is to create great games and technologies that actively engage and involve the YouTube community of players, bloggers, reviewers and creators. We’re setting up shop right here in beautiful Vancouver! If you want to join a start-up where you get to work remotely and build something new, and be a part of an honest & transparent leadership team with a veteran Studio Head, then MGN Studios is for you! THE ROLE: Are you up for the challenge? We are currently seeking a Senior Game Engine Developer to join our team in leading the architecture and development of browser-based video game engine technology. You will be the driving force in the design and development of our studio’s game engine infrastructure. You should be comfortable diving deep into technical architectures and requirements, able to quickly identify solutions to challenges discovered during development, and ready to direct and mentor other developers in creating a robust and scalable code base. Prior experience building browser-based multiplayer game technology is preferred. We are looking for someone to be a key participant in the creation of a collaborative environment that leverages agile development and rapid prototyping; rewards creative solutions and intelligent risk taking; fosters a culture of excellence, respect, and fun; and makes great games. RESPONSIBILITIES: Are you ready to make a contribution to our team? Lead the design, implementation, and growth of a browser-based HTML5 multiplayer game engine. Manage and mentor a team of software developers through the interactive development process. Set company-wide code development standards and best practices. Work with game designers and artists in the development of game features, art pipelines, and tools. Partner with producers, PMs, and other leads on schedules and plans. Identify technical and production issues/risks and propose solutions. QUALIFICATIONS: Do you have what it takes? Degree in Computer Science and/or relevant professional experience. 5+ years experience in professional software development. 3+ years of experience in the development of game engines. Very good knowledge of existing game engines (e.g. Unity, GameMaker, Phaser, Pixi, Turbulenz, etc.) and server side technologies. Deep knowledge of modular programming, API design, and game architectural patterns. Extensive experience with frontend and backend technologies such as HTML5, Javascript, CSS/CSS3, jQuery, PHP, Python, Node.js, MySQL, etc. Source revision control experience (Github preferred). Professional experience in agile software development. Experience working effectively in cross-functional game teams. Excellent oral and written English communication skills. Experience developing MMO city builder games is a PLUS Experience developing casual MMO .io games is a PLUS Experience with Apache Ant, iOS WebKit, Android Webkit / Chrome is a PLUS Knowledge of video platforms including YouTube, Dailymotion and Twitch is PLUS COMPENSATION: Competitive Salary Flexible work hours Flexible work locations (home, office, etc.) Are you intrigued? Here are a few more reasons to make MGN Studios your daytime/anytime home: Work remotely - Did we already mention you get to work remotely? Yes, it’s true! Leadership - Do you like working with veteran Studio Head who will give you clear direction, honesty and guidance, and believes people are the pillars to success. He’s the opposite of an evil villian with a curly moustache. Build something new - Play a role in building a game development studio that can’t stop and won’t stop growing. Career growth - Make an impact by leading projects and driving the direction of the studio. Develop initiatives and solutions that drive your career and boost the studio’s growth. For Freedom! Does this sound like you? Please apply asap as we are interviewing immediately for this permanent, full time position. PM and we can arrange a time to speak over the phone!
  2. Hey everyone, I want to add different buttons with 2 different clickevents. If I add one button it works, if I add another one it doesn't. The Images and sounds are in my Preloader file and i tested them, so they work and aren't the problem. Any Solutions? Thank you! Game.Level0_5 = function(){}; var frido; var back; Game.Level0_5.prototype = { create:function(game){ back = this.add.sprite(game.world.centerX, game.world.centerY, 'hauptkirche'); back.scale.setTo(1.335,1); back.anchor.setTo(0.75, 0.5); frido = this.add.sprite(game.world.centerX, game.world.centerY, 'frido2'); frido.scale.setTo(0.5,0.5); frido.anchor.setTo(2.0, 0.67); this.createButton(game, " Das ist die Hauptkirche.\n \n Die Hauptkirche wurde 1085 erbaut.\n Bis zur Reformation war sie katholisch \n und wurde danach \n im Jahr 1560 evangelisch. \n Im Dreißigjährigen Krieg (1618-1648) \n wurde die Kirche zerstört \n und musste neu gebaut werden. \n \n Frage: \n Wann wurde die Hauptkirche zerstört? ", game.world.centerX +266, game.world.centerY + 155, 268, 900.0,); var button = game.add.button( game.world.centerX+265, game.world.centerY+45, 'aki', function() { this.game.sound.play('correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); button.anchor.x = .5; button.anchor.y = .5; button.input.useHandCursor = true; }, var btn = game.add.button( game.world.centerX+200, game.world.centerY+60, 'bki', function() { this.game.sound.play('correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); btn.anchor.x = .5; btn.anchor.y = .5; btn.input.useHandCursor = true; }, update: function(){ }, createButton:function(game, string, x, y, w, h, callback) { var button1 = game.add.button(x, y, 'button1', callback, this, 2, 1, 0); button1.anchor.setTo(0.5, 0.6); button1.width = w; button1.height = h; var txt = game.add.text(button1.x, button1.y, string, { font: 'bold 14px palatino linotype', fill: '#0000000', align:'center', wordWrap: true, wordWrapWidth: 600 }); txt.anchor.setTo(0.5, 1.5); } };
  3. mla

    Images disappearing

    My game is build for 6 players. Each player loads the game in a browser is assigned a unique room that displays a personal card and is represented by an avatar. The game works well, the images all load, however for some reason as more players access the game, some images may disappear. The player is actually still logged into the game and can even play the game, however their avatar image may have disappeared or their personal card may have disappeared. There is no consistency to which image may vanish and it doesn't always happen, but in most cases it does. Would anyone know why this may be? Thanks!
  4. Hello, I'm fairly new to development with Phaser (TypeScript). I've made a simple login screen in HTML, and I'm trying to make the "Log In" button which is in the external HTML call a function in my Phaser game. This is the button that will call the function: <button onclick="login()">Log In</button> Where in my project should I write the function "login", and how can I call it when I click the button? Any help would be greatly appreciated. 😃 I'm using this as a base for my project (I purchased his book): https://github.com/code0wl/Multiplayer-Phaser-game
  5. Hi, I'm creating a node js game, using javascript and socket io. I originally was not going to add a mongo DB, but now I'm thinking I should for anyone who may accidentally be disconnected from the game. What would the best game option be? To use a database or not, and the reasons behind it. Many thanks, MLA
  6. Thunderfist

    making collectibles in canvas game

    I've gotten most of my game done, but I still have to make at least something that the player can do other that walk around the map and bump into things. I decided to add coins to collect, but I just have one problem: I've never added collectibles to a game before. Please help. I need to get this done in before next Friday. EDIT: I tried coding, but a coin wouldn't spawn anywhere other than the upper left corner. I tried setting its draw setting to this.randomRange, so it would spawn randomly on the map. Here's the code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, cash = new collectibles(), obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgPlayer = new Image(); imgMoney = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); imgPlayer.src = "img/temp.png"; imgPlayer.addEventListener("load", init, false); imgMoney.src = "img/coin.png"; imgMoney.addEventListener("load", init, false); function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); cash.update(); } function draw() { player1.draw(); cash.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 48; this.srcY = 1; this.width = 31; //how wide the sprite is in pixels this.height = 35; //how tall the sprite is in pixels this.drawX = 125; this.drawY = 50; this.moveX = 31; this.moveY = 35; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = .60; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgPlayer, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY,//draw specific specific points on x and y coordinates //newMoveX = this.moveX, //newMoveY = this.moveY; obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; //newMoveY -= this.speed; //this.moveY -= 35; this.srcX = 48; //Facing North this.srcY = 72; } else if (this.isDownKey) { newDrawY += this.speed; //newMoveY += this.speed; //this.moveY += 35; this.srcX = 48; //Facing South this.srcY = 1; } else if (this.isRightKey) { newDrawX += this.speed; //newMoveX += this.speed; //this.moveX += 31; this.srcX = 48; //Facing East this.srcY = 36; } else if (this.isLeftKey) { newDrawX -= this.speed; //newMoveX -= this.speed; //this.moveX -= 31; this.srcX = 48; //Facing West this.srcY = 108; } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var tEdgeWidth = 512, tEdgeHeight = 10; var bEdgeWidth = 512, bEdgeHeight = 10; var rEdgeWidth = 1, rEdgeHeight = 512; var lEdgeWidth = 1, lEdgeHeight = 512; var bigFenceLeftSideWidth = 20, bigFenceLeftSideHeight = 304; var bigFenceRightSideWidth = 22, bigFenceRightSideHeight = 304; var bigFenceUpperLeftWidth = 160, bigFenceUpperLeftHeight = 30, bigFenceUpperRightWidth = 140, bigFenceUpperRightHeight = 30; var bigFenceLowerLeftWidth = 100, bigFenceLowerLeftHeight = 20, bigFenceLowerRightWidth = 195, bigFenceLowerRightHeight = 20; var smallFenceSideWidth = 4, smallFenceSideHeight = 80; var rockWidth = 34, rockHeight = 32; var smallInclineWidth = 89, smallInclineHeight = 42; var largeInclineRWidth = 153, largeInclineRHeight = 55; var largeInclineLWidth = 176, largeInclineLHeight = 58; var leftHoleWidth = 64, leftHoleHeight = 48; var rightHoleLongWidth = 113, rightHoleLongHeight = 48; var rightHoleTallWidth = 43, rightHoleTallHeight = 99; obstacles = [new Obstacle(10, 25, tEdgeWidth, tEdgeHeight), new Obstacle(10, 512, bEdgeWidth, bEdgeHeight), new Obstacle(499, 1, rEdgeWidth, rEdgeHeight), new Obstacle(14, 1, lEdgeWidth, lEdgeHeight), new Obstacle(2, 229, bigFenceLeftSideWidth, bigFenceLeftSideHeight), new Obstacle(320, 229, bigFenceRightSideWidth, bigFenceRightSideHeight), new Obstacle(10, 212, bigFenceUpperLeftWidth, bigFenceUpperLeftHeight), new Obstacle(200, 212, bigFenceUpperRightWidth, bigFenceUpperRightHeight), new Obstacle(15, 499, bigFenceLowerLeftWidth, bigFenceLowerLeftHeight), new Obstacle(144, 499, bigFenceLowerRightWidth, bigFenceLowerRightHeight), new Obstacle(90, 403, rockWidth, rockHeight), new Obstacle(184, 291, smallInclineWidth, smallInclineHeight), new Obstacle(15, 165, leftHoleWidth, leftHoleHeight), new Obstacle(258, 165, rightHoleLongWidth, rightHoleLongHeight), new Obstacle(335, 162, rightHoleTallWidth, rightHoleTallHeight), new Obstacle(97, 170, rockWidth, rockHeight), new Obstacle(73, 195, rockWidth, rockHeight), new Obstacle(0, 115, largeInclineLWidth, largeInclineLHeight), new Obstacle(192, 115, largeInclineRWidth, largeInclineRHeight), new Obstacle(120, 175, rockWidth, rockHeight), new Obstacle(215, 170, rockWidth, rockHeight), new Obstacle(233, 187, rockWidth, rockHeight), ]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function collectibles () { this.srcX = 0; this.srcY = 0; this.width = 20; //how wide the sprite is in pixels this.height = 20; //how tall the sprite is in pixels this.drawX = randomRange; this.drawY = randomRange; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); } collectibles.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); }; collectibles.prototype.draw = function () { ctxEntities.drawImage(imgMoney, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, edgeTop = 512, edgeBottom = 0, edgeRight = 512, edgeLeft = 0; return newBottomY > edgeBottom || newTopY < edgeTop || newRightX > edgeRight || newLeftX < edgeLeft; } What's wrong with it? just editing it in the slightest made the coin disappear when I refreshed the page.
  7. I have Class constructor that require options parameter, that parameter is plainobject {}, also it has 0 or more arrays inside and another plainobjects. I create a lot of instances of this Class and these are succesfully pooled already. But I am wondering what to do with this options param like this one: { type: "type", ..., bodies: [ { type: "type" ..., }, ... ], ... } Sometimes options param is hardcoded, sometimes algorithm gets it by net connection in arraybuffer to recreate {} & []; What is worth pooling mechanism in javascript? For sure complex objects with a lot of properties and inner objects. What about these little guys then? {} & [] Is it worth to pool empty plain objects and arrays? With releasing it to pool you would remove all properties in {} and setting length to 0 in array.
  8. Job posting: Studio FOW Position: Senior Game Software Developer We are looking for a game senior game software developer who can deliver web based, HTML5 game applications. The role includes overseeing the full development life cycle including identifying the correct technology, architecting the application, security, testing and deploying. This is not a project management role, you will be solely responsible for implementation. The candidate must have a proven track record in developing web based game applications using WebGL and JavaScript. We expect the developer to be able to deliver a modular, scalable and testable application. You will also be working to integrate existing pre-rendered video content into the game which forms an integral part of the player experience. Experience in enterprise grade applications would be necessary so the design could address high availability requirements (i.e. load balancing and clustering). Experience in WebSockets and relational databases such as MySQL, PostgreSQL or MS SQL are required. Experience in ECMAScript, NodeJS and node-webkit would be a plus. Knowledge of other programming languages (Python, C++) is also a plus. Please note that this game will be of the adult (18+) variety and therefore anyone uncomfortable with such content need not apply. A portfolio and references will be required during the interview process.
  9. Foobar

    I need you.

    Hello, here I created game but I have a problem with a function. When did the party begin to have a message that says "Go!" and I would like it to change when the player reaches 100 points. My last try script that absolutely does not work. function textChange() { updateScore(); if (player.score == 100) { updateText("Good!"); } } Thanks all
  10. Hello there, i would like to use the babylonjs package in my JS project. If I do this with my import statement, everything goes. I then call a function in another file and want to assign a new standard material to the object (I pass scene to the function). But now he tells me "this.getScene is not a function". Can it be because this package is not designed for webpack+js+module? Uncaught (in promise) TypeError: this.getScene is not a function
  11. Hi, so I'm trying make a doodle jump type of a game , so far I've created the infinity world and added 6 ledges. now I want to kill and revive the ledges with the new X and Y coordinates, but somehow can't get it to work. I've managed to kill the ledges as they go out of camera bounds by using (forEachAlive)but got issues with reviving them. I've tried getFisrtDead and reset but nope, cant get it to work. Does anyone know how I could solve this? so this is how I create the platforms: generatePlatforms: function(){ //grouping the platforms platformPool = game.add.group(); platformPool.enableBody = true; var ground = game.add.sprite(0, game.world.height -32 ,'ground' ); platformPool.add(ground); ground.scale.setTo(3,2); ground.body.immovable = true; for (var i= 0; i < 6; i++){ var randomX =game.rnd.integerInRange(0, game.world.width -50); var randomY = game.world.height -100 *i; ledge = game.add.sprite(randomX,randomY,'ground'); platformPool.add(ledge); ledge.scale.setTo(0.3,0.3); ledge.body.immovable =true; } }, and this is how I kill the ledges under the update function: platformPool.forEachAlive(function(el){ var platformYMin = el.y; if(el.inCamera == false){ el.kill(); } },this); Thanks in advance
  12. Thunderfist

    Character sprite not appearing

    I've been working on an action RPG for quite a while now, and I finally got my map to appear. Now I'm having a hard time getting my character sprite to appear. I have no idea what I should do about this. Here's my code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); player1.src = "img/player.png"; function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); } function draw() { player1.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 0; this.srcY = 600; this.width = 35; this.height = 54; this.drawX = 400; this.drawY = 300; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY, obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; this.srcX = 35; //Facing North } else if (this.isDownKey) { newDrawY += this.speed; this.srcX = 0; //Facing South } else if (this.isRightKey) { newDrawX += this.speed; this.srcX = 105; //Facing East } else if (this.isLeftKey) { newDrawX -= this.speed; this.srcX = 70; //Facing West } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var treeWidth = 65, treeHeight = 90, rockDimensions = 30, bushHeight = 28; obstacles = [new Obstacle(78, 360, treeWidth, treeHeight), new Obstacle(390, 395, treeWidth, treeHeight), new Obstacle(415, 102, treeWidth, treeHeight), new Obstacle(619, 185, treeWidth, treeHeight), new Obstacle(97, 63, rockDimensions, rockDimensions), new Obstacle(296, 379, rockDimensions, rockDimensions), new Obstacle(285, 25, 150, bushHeight), new Obstacle(570, 138, 150, bushHeight), new Obstacle(605, 492, 90, bushHeight)]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, treeLineTop = 5, treeLineBottom = 570, treeLineRight = 750, treeLineLeft = 65; return newBottomY > treeLineBottom || newTopY < treeLineTop || newRightX > treeLineRight || newLeftX < treeLineLeft; } Any ideas for what can be done to make the sprite appear?
  13. armstr38

    Help with scoring using animate cc

    This is my code, which changes by frame, I need to do a scoring system, but when I used the following code to add a score it works fine for the first 2 frames then doubles and by the end it's like 229. Thank you for any help. Score; var score = 0; function scoreIt(); { score += 1; } Frame by frame; this.stop(); this.ans1.addEventListener("click", fl_MouseClickHandler.bind(this)); function fl_MouseClickHandler() { this.rocket2.play(); this.rocket1.stop(); this.rocket3.stop(); this.next.mouseEnabled = true; this.ans2.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); } this.ans2.addEventListener("click", f2_MouseClickHandler.bind(this)); function f2_MouseClickHandler() { this.rocket1.play(); this.rocket2.stop(); this.rocket3.stop(); this.next.mouseEnabled = true; this.ans1.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); scoreIt(); } this.ans3.addEventListener("click", f3_MouseClickHandler.bind(this)); function f3_MouseClickHandler() { this.rocket3.play(); this.rocket2.stop(); this.rocket1.stop(); this.next.mouseEnabled = true; this.ans2.mouseEnabled = false; this.ans1.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); }
  14. DigitalTina

    help with splitting an application

    <script>window.onload = function () { //Application 1: Dog 1 var app_1 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog1; document.getElementById('area').appendChild(app_1.view) $(window).resize(function () { app_1.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog1', 'assets/animate/dog1_skeleton.json') .load(onAssetsLoaded); app_1.stage.interactive = true; app_1.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_1.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog1.position.set(app_1.screen.width / 4, app_1.screen.height - bottom_position_ratio*app_1.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog1.scale.set(ratio*app_1.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog1 = new PIXI.spine.Spine(res.dog1.spineData); // set current skin dog1.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog1.stateData.setMix('head_l', 'head_r', 0.4); dog1.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog1.state.setAnimation(0, 'neutral_breth', true); dog1.state.setAnimation(1, 'tail_fast', true); app_1.stage.addChild(dog1); app_1.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog1.state.setAnimation(3, 'head_l', false, 0); } else { dog1.state.setAnimation(3, 'head_r', false, 0); } rand = getRandomInt(3); setTimeout(function () { dog1.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } //Application 2: Dog 2 *********************************************** var app_2 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog2; document.getElementById('area').appendChild(app_2.view) $(window).resize(function () { app_2.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog2', 'assets/animate/dog2_skeleton.json') .load(onAssetsLoaded); app_2.stage.interactive = true; app_2.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_2.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog2.position.set(app_2.screen.width / 4 + app_2.screen.width / 2 , app_2.screen.height -bottom_position_ratio*app_2.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog2.scale.set(ratio*app_2.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog2 = new PIXI.spine.Spine(res.dog2.spineData); // set current skin dog2.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog2.stateData.setMix('head_l', 'head_r', 0.4); dog2.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog2.state.setAnimation(0, 'neutral_breth', true); dog2.state.setAnimation(1, 'tail_fast', true); app_2.stage.addChild(dog2); app_2.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog2.state.setAnimation(3, 'head_l', false, 0); } else if (rand == 2) { dog2.state.setAnimation(3, 'head_r', false, 0); } else { dog2.state.setAnimation(3, 'fun', false, 0); } setTimeout(function () { dog2.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } }</script> I originally had 1 application with 2 dogs animated inside. I now split the application so each dog is separate dog 1 and dog 2. But I did not split it correctly, as the dogs do not appear anymore. What mistakes do you see in this code?
  15. Bladetrick

    DynamicTextures on a Cube

    Hello again! I was playing around with some of the examples (love the playground). In this instance I was looking at a PG that created a ground and applied a dynamic texture to it. For kicks, I changed it to a Cube, but noticed that whatever I drew on the dynamic texture would show up on all 6 sides. Is there a way to make it so that if I draw a star on one side its not duplicated on the others? Thanks for your time
  16. Hey, i have creating android hybrid games. i have babylonJS javascript framework for game. The skybox object textures does not loading properly. other object are loading normally in my game. var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:100.0}, game_scene); skybox.position = new BABYLON.Vector3(0, 0, 0); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", game_scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/hills", game_scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial;
  17. Hey , If i Multiple objects loaded time the device is hanging. i have using small objects only 3 or 5 mb file objects only. how to solve this type of problem.
  18. Hey everyone, I've just started working with Babylon.js and I have a question. I've got a double array filled with 1 & 0 and I want it tranformed to 3d. 1 being blocks and 0 spaces. I did it this way: var sizeFactor = 0.2; for (var i = 0; i < array.length; i++) { for (var j = 0; j < array[0].length; j++) { if (array[i][j] === 1) { var box = BABYLON.MeshBuilder.CreateBox('box', {height: sizeFactor, width: sizeFactor, depth: sizeFactor}, scene); box.position.x = i * sizeFactor; box.position.y = 0; box.position.z = j * sizeFactor; } } } but its very taxing I believe to the system because of the many boxes. Is there any other less taxing way to achieve this?
  19. This might seem like a ridiculous question, but I was just curious to hear your input on the subject. In brief, I have spent a lot of time learning web development (specifically the front-end). Although, I recently gained interest in creating games with JavaScript frameworks such as Phaser. With that said, is there anything wrong with making simple 2D games for mobile using JavaScript code and something like PhoneGap to get it on mobile stores? Do any of you currently do this? Or should I change my focus to Unity and C#?
  20. I have all sorts of game ideas, but I quickly run into a brick wall since I'm not really an artist. Are there any guides out there for creating simple "programmer art" for games? Even better, are there any website for free game art?
  21. Hello everyone!, I'm stuck with my 2d game.. i'm trying to give certain sprites a on mousehover event(i dont really know if this is possible lel but i am really new with canvas so pleas help me out). does anyone know a better way or the sollution for this??? regards, slyvan25
  22. jamessimo

    In-game loading bar

    Hey guys, I have made a game that needs to parse and render large save files. The issue I have is that whiles the javascript in Phaser is doing its thing all I can do is show a gif spinner in html whiles the player waits for the game to load. I would like to show a progress bar, I have made a global var that basically ticks up at key intervals in the loading process. The problem is is that the number does increment however the UI in phaser does not update as well as the HTML (in html I just made a update tick and read the loadingProgress var every tick) . I have tested this using debug.text, html span and a phaser ext object. My entire game just locks up when processing stuff but I would like a hook that could be independent and update a number at core intervals.
  23. Hey guys! I am kinda new to PIXI so I apologize if there is a super obvious fix to this problem but I am having a super hard time getting display objects I called buttons to show up. Button 1 and the TilingSprite appear just fine but the rest of the buttons do not. I looked at the contents of app.stage in my console and it says the buttons are all in there. Thanks in advance for the help! function playerSelect(){ // var onClick = function(){ new characterSelect()}; var stage = new PIXI.Container(); stage.visible = true // var container = new PIXI.Container(); var button1 = new Button("resources/button-small.png", 323, 162); var player1 = new Button("resources/player-select-buttons/1player-noselect.png", 293, 575); var player2 = new Button("resources/player-select-buttons/2player-noselect.png", 293, 575); var player3 = new Button("resources/player-select-buttons/3player-noselect.png", 293, 575); var player4 = new Button("resources/player-select-buttons/4player-noselect.png", 293, 575); //selected var player1Select = new Button("resources/player-select-buttons/1player-selected.png", 293, 575); var player2Select = new Button("resources/player-select-buttons/2player-selected.png", 293, 575); var player3Select = new Button("resources/player-select-buttons/3player-selected.png", 293, 575); var player4Select = new Button("resources/player-select-buttons/4player-selected.png", 293, 575); button1.position.x = 800; button1.position.y = 900; player1.position.x = 323; player1.position.y = 227; player2.position.x = 653; player2.position.y = 227; player3.position.x = 975; player3.position.y = 227; player4.position.x = 1300; player4.position.y = 227; player1Select.position.x = 323; player1Select.position.y = 227; player2Select.position.x = 653; player2Select.position.y = 227; player3Select.position.x = 975; player3Select.position.y = 227; player4Select.position.x = 1300; player4Select.position.y = 227; button1.on("mousedown", function(){ stage.visible = false; new characterSelect()}); player1.on("mousedown", function(){ stage.addChild(player1Select) }); player2.on("mousedown", function(){ // stage.removeChildren(); stage.addChild(player2Select)}); player3.on("mousedown", function(){ app.stage.addChild(player3Select)}); player4.on("mousedown", function(){ app.stage.addChild(player4Select)}); player1Select.on("mousedown", function(){ console.log("hit")}); app.stage = stage; var renderer = PIXI.autoDetectRenderer( 1920, 1080, {view:document.getElementById("game-canvas")} ); //switch to png PIXI.loader .load(function(){ var b = PIXI.Texture.fromImage("./resources/playerSelection-final.png"); var tilingSprite = new PIXI.extras.TilingSprite(b, 1920, 1080); tilingSprite.alpha=0.5; stage.addChild(tilingSprite); stage.addChild(button1); stage.addChild(player2); stage.addChild(player1); stage.addChild(player3); stage.addChild(player4); renderer.render(stage); }); } function Button(path, width, height) { var texture = PIXI.Texture.fromImage(path); PIXI.extras.TilingSprite.call(this, texture, width, height); this.tilePosition.x = 0; this.tilePosition.y = 0; this.interactive = true; this.buttonMode = true; this.viewportX = 0; } Button.prototype = Object.create(PIXI.extras.TilingSprite.prototype); Button.prototype.setViewportX = function(newViewportX) { var distanceTravelled = newViewportX - this.viewportX; this.viewportX = newViewportX; this.tilePosition.x -= (distanceTravelled * button.DELTA_X); };
  24. game_prince

    multiplayer online card game

    hello i want to make a online multiplayer online card game using phaser. CAn you please help me in this that from where i would start??
  25. Hi, Our company develop simulations of aircraft systems. We are looking for developers that use Phaser Editor, and has knowledge of Typescript or Javascript and Phaser. Also we will provide you our own framework for developing easier and faster. It's a fully freelance job and we will give you only deadline. Payment method is open to negotiation. You can check our examples here: http://www.flycoglobal.com/B737schematics/ExteriorLightingLocations/ http://www.flycoglobal.com/B737schematics/BleedAirSystem/ http://www.flycoglobal.com/B737schematics/HydraulicPowerDist/