Search the Community
Showing results for tags 'noob'.
-
Hi! I'm an experienced programmer with C++, but just getting started with JavaScript. I'm making a simple 2D game to get started. I'm using the CreateJS library to do my image/spritesheet manipulation. Right now, I'm trying to create a Sprite class, which will set up a spritesheet in the constructor, and draw the sprite with coordinates in the draw() function. (a member of my Sprite class) Anyways, I'm doing some debugging now. My program stops in the constructor of my Sprite class, and I can't figure out why. To anyone with CreateJS experience, what is wrong with my constructor function?!?!?! Thanks! class Sprite { constructor(src, frameWidth, frameHeight) { window.alert("DEBUG constructor. " + src + ", " + frameWidth + ", " + frameHeight); //Gets here this.spriteSheet = new createjs.SpriteSheet({ images: [queue.getResult(src)], frames: {width: frameWidth, height: frameHeight}, animations: { ani: [0,4] } }); window.alert("DEBUG end constructor"); //Never gets here } draw(x, y) { animation = new createjs.Sprite(this.spriteSheet, "ani"); animation.regX = 99; animation.regY = 58; animation.x = enemyXPos; animation.y = enemyYPos; animation.gotoAndPlay("ani"); stage.addChildAt(animation,1); } }
-
Hello Total newcomer to Phaser 3 and Javascript here so please bear with me! I've been fiddling around with the very first example (the bouncing logo) just to get a feel for how things work (code below, set to use local copy of phaser.js as a test and with a pointless 2D array!). It seems pretty straightforward so far but I have two questions... Is it usual to declare variables outside of functions (as in my code), rather than say declaring in preload() or create() and passing them around? And secondly, how do I go about splitting a program into logical chunks/modules/files and retain access to variables or constants that will be required throughout the program? Thank you! Paul <!DOCTYPE html> <html> <head> <!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script> --> <script src="phaser.js"></script> </head> <body> <script> var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 2000 } } }, scene: { preload: preload, create: create, update: updatathon } }; var game = new Phaser.Game(config); var cursors; var logo; var emitter; var arrayText; var test = [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 1] ]; function preload () { this.load.setBaseURL('http://labs.phaser.io'); this.load.image('sky', 'assets/skies/space3.png'); this.load.image('logo', 'assets/sprites/phaser3-logo.png'); this.load.image('red', 'assets/particles/red.png'); } function create () { this.add.image(400, 300, 'sky'); var particles = this.add.particles('red'); emitter = particles.createEmitter({ speed: 600, scale: { start: 0.75, end: 0 }, blendMode: 'ADD', angle : 90 }); // player controlled logo-flavoured spaceship logo = this.physics.add.image(400, 400, 'logo'); logo.setCollideWorldBounds(true); emitter.startFollow(logo); //set up cursor keys cursors = this.input.keyboard.createCursorKeys(); //text to display a pointless array index arrayText = this.add.text(16, 16, '', { fontSize: '32px', fill: '#FFFFFF' }); } function updatathon() { logo.setVelocity(0); if (cursors.up.isDown) { logo.setVelocityY(-100); logo.setScale(0.95); logo.setVelocityX(Phaser.Math.FloatBetween(-100, 100)); emitter.setAngle(Phaser.Math.FloatBetween(60, 120)); emitter.on = true; } else { emitter.on = false; logo.setScale(1); } if (cursors.left.isDown) { logo.setVelocityX(-100); } if (cursors.right.isDown) { logo.setVelocityX(100); } arrayText.setText('Array [0][1]: ' + test[0][1]); } </script> </body> </html>
-
Hi, so I'm very new to Pixi.js and javascript, coming from a c++ background I am lost without my classes. Can anyone explain to me what a basic template should look like for starting a Pixi.js game and you guys go about organising the code into separate files? I currently have one big blob of code in a single file, as all the tutorials i found only use one. Any help you can give will be much appreciated. edit: so i finished the game i'll leave a link and any feedback on the code would be helpful also does anyone know how to scale the size of the renderer for different screen sizes? GAME LINK: https://github.com/SeanBurns221/Pixi.js-Game
-
I am just starting with Phaser and figured I should learn 3 instead of an earlier version. I have created a game, called in a scene, but can't seem to call a simple function. I have made tons of games in Actionscript, so am hoping to make this transition to Phaser easily. I am probably missing something basic or have screwed up something since I am going from 4 different tutorials. lol Any help would be great! When I run this, it gets to line 28 and then says SyntaxError: bad method definition. Help! Oh,... and while I have your attention... Anyone have a particular package for Sublime that helps with Phaser or Javascript? class FactChoice extends Phaser.Scene { constructor() { super({key:"FactChoice"}); } preload() { this.load.image('0', 'assets/images/numbers/0.png'); this.load.image('1', 'assets/images/numbers/1.png'); this.load.image('2', 'assets/images/numbers/2.png'); this.load.image('3', 'assets/images/numbers/3.png'); this.load.image('4', 'assets/images/numbers/4.png'); this.load.image('5', 'assets/images/numbers/5.png'); this.load.image('6', 'assets/images/numbers/6.png'); this.load.image('7', 'assets/images/numbers/7.png'); this.load.image('8', 'assets/images/numbers/8.png'); this.load.image('9', 'assets/images/numbers/9.png'); this.load.image('next', 'assets/images/btnNextLevel.png'); this.load.image('BG', 'assets/images/sky.png'); } create() { console.log("time to make FactChoice"); arraysChosen(); } arraysChosen: function(){ console.log("hey"); } }
-
Hi, I just set up Phaser on my Webserver and was trying the Hello World Example, however all I got was a black canvas and no error message. Here's my simple code: <!doctype html> <html> <head> <title>phas3r</title> <script src="phaser.min.js"></script> <script src="game.js"></script> </head> <body> </body> </html> window.onload = function() { var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create }); function preload() { game.load.image('logo', 'phaser.png'); } function create() { var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); console.log(logo); } }; The two JS are loaded correctly and the window.onload function is fired. However the preload and the create functions are not fired. The only message in Chrome's console is the "rainbowy" phaser-init message: 11:23:24.916 phaser.min.js:1 Phaser v3.1.0 (WebGL | Web Audio) https://phaser.io Am I missing something? I'm using IIS
-
I have simple game that I had working fine on localhost from Visual Code. Decided to try it out on Cloud9. Configured Cloud9 user and permissions (separate from Admin group) I downloaded the phaser-master from github. The file contains hidden .github folder and .gitignore file. Then there are v2, v2-community, and v3 folders. To use Phaser in cloud9 I'm asuming I have to upload the files in the v2 folder. I did that into the cloud9 root. The html file is: <html> <head> <meta charset="UTF-8" /> <title>Coin Game!</title> <style> html { background: black; } canvas { margin:auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html It is located in the cloud9 root folder. I rand npm install experss from the terminal in the cloud9 instance root. Then I ran npm init --save. I'm not sure if I have to do this, but I ran a simple install of node.js server from a terminal window in the cloud9 root. The command I used was: npm install node server When I try to run my game.js file from cloud9 editor window, it errors at this line: // setup game when the web page loads window.onload = function () { game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); What is says is "window is not defined" It ran so easily on my local node server. I did all the local work from Visual Code. It set up and ran the server. It was using an extension called live server. I'm not sure exactly what it does; but if I just open up the local files directory, check node, then run node game.js, I get the same error of window not defined. I'd like to get this to work on cloud9 for learning purposes. I'd appreciate any help, please.
-
So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html
-
I'm wondering what the best way to animate a sprite is. Is there a basic example or tutorial out there somewhere? I have ten images in a spritesheet that are part of an idling animation, and I made a texture for each of the images. I put the textures in an array, and my plan is to just change the texture of my sprite each frame in the gameloop, looping through the array of textures over and over again. Maybe using Sprite.setTexture ??? Is that a good way to go about it? Any links to info or tutorials would be much appreciated. Thanks,
-
Hello, i am again... i have a realy noob question but cant find an answer. Since i playing with this Playground i try to figure out how i can get the position of the car (mesh = carBody ?) Im not successful. Line 42 - 44 scene.registerBeforeRender(function(){ console.log("Poisition", carBody.position); }); The only thing that changes is when i turning the steering wheel. Nothing about the position on the ground... I tought the carBody "merge" all meshes into one and move them around with them. So that the positions property on child meshes a relative to the parent mesh. I dont get it...
-
I'm sure there's probably a really simply explanation for this, and I've certainly put in the requisite time researching and experimenting... but I'm having a hard time getting collisions/physics to work properly with heightmaps. Here's the playground: https://www.babylonjs-playground.com/#UV2S4R#1. Basically, the balls fall until a collision, then they slow down, which is working as expected. However, when you uncomment line #25 (`ground.rotation.y = .1;`), it's almost like the mesh rotates, but the physicsImpostor does not. It seems like I recall reading somewhere that you have to use a Quaternion to rotate meshes with impostors, but I can't find that reference for the life of me. Any guidance would be much appreciated!
-
I have a player in a group like this: this.players = this.game.add.physicsGroup(); blue_player = this.players.create(0, this.world.height - 490, 'blue_player'); this.players.setAll('body.bounce.y', 0.2); this.players.setAll('body.gravity.y', 1000); this.players.setAll('collideWorldBounds', true); blue_player.animations.add('idle',[0,1,2],2.1,true); this.players.callAll('animations.play', 'animations', 'idle'); And I add a function to my game prototype that is called by my update function: blue_controls: function () { if (blue_keyMap.jump.isDown) { console.log("blue is going up in the world"); this.players.blue_player.body.velocity.y = 2000; } }, And get: TypeError: Cannot read property 'body' of undefined The error is with this line: this.players.blue_player.body.velocity.y = 2000; I have tried just this.blue_player.body.velocity but get blue_player undefined, and others. I've ran out of things to try that I can think of. I know I'm not referencing the object correctly, but I'm currently putting in the milage to learn object Inheritance and prototypes - and using this game I'm making as practice. I'm just a little stuck, help a noob out?
-
Hi people! Babylonjs is an amazing bit of code and I am extremely grateful for it's very existence. Thank you for creating it and releasing it for free. Now... I am feeling a bit silly for asking this but I seem to have hit a bit of a road block. How do I access objects on the JSON so that I can instruct a camera to move to them smoothly ( to set as the central focus in the camera's rotational sphere ) and look at them while they are moving towards them. If fact, how do I access JSON items full stop? I know the names of the items in my JSON as I created it in blender and loaded it in the babylonjs editor but I can not seem to call them from code at all. I am also able to load it in BabylonJS. It is all there, ready to go but ... I ... CANT .... PLAY .... WITH .... IT ;-( What is the best way to address these items in JS? I can create a new mesh like basic cube and interact with it by following all of the super helpful tutorials and am considering just loading my scene as separate objs but I am thinking this could be a lot of potentially unnecessary extra work. Thank you very much in advance. I want to become a pro at BabylonJS but just need to get over this first hurdle! :-) ----- EDIT: I figured out the above and it was so simple that I feel like a complete dunce! I was tempted to delete this post to save my pride but I think it is worth leaving around for any other noobs to find! If you create a box in JS in babylonjs eg: var movingbox = BABYLON.Mesh.CreateBox("box", 3.0, newScene); You can move the box on the x like this: movingbox.position.x = -5; If your models is part of the Json this works exactly the same way but you must call your model first: staticbox = scene.getMeshByName("staticbox"); ----- While I am in an asking sort of mood: can I call an action created in the action editor from JS? I have managed to do all sorts of other camera related bits from an overlaid html UI I have created. Marc
-
Hello I have messed around with the playground and I would like to use the full version, I downloaded the files from github but i do not know how to actually get into the full version and start coding, please help, I have only ever used python and a small bit of CSS
-
Why is this code not working? I followed this tutorial: https://doc.babylonjs.com/tutorials/creating_a_basic_scene and I used textmate to write it ( I am on a mac ). When I open it it takes me to a blank web page.
-
How do I start my first project, I have messed around with the playground and I'm ready to start the full version. Buuuuuut I dont know how to open the full version. I downloaded all the files from github but I just dont know how to open the actual module
-
Hi all, first post, and a Pixi.js noob trying to learn the ropes - so please be gentle! First off, I'm a designer by trade (www.digilocker.co.uk - shameless plug) but I have dabbled in coding over the years mainly on a UI Development basis (AS3 Scaleform, Flash, C# Unity). A lot of my work at the moment is casino games, and we've been looking for a modern alternative for putting these together. Previously games would be made strictly in canvas using sprite sheets and keyframed animations for the most part. I've started using Spine for animations, which in turn has led us to Pixi.js as front runner for a renderer (with most mobiles now supporting webgl). Phaser looked attractive, but not sure it would offer the low level access the developers would need to hook into the backend. My role really is to get a prototype together in some form to showcase animations, get the frontend together and roll that onto future games as we learn the possibilities. Previously tried Animate CC but webgl offerings are seriously limited I think there atm, so thought it was time to get my hands dirty! Javascript is also pretty new to me to be honest, so trying to get my head around it at the moment. I've got a very basic game prototype together, using GSAP for transitions (which I'm already accustomed to), but still struggling on how best to split a game down into classes if this is possible? All the script is in one js file currently, and was wondering if it would be possible to take a more OOP approach? (Can tell I'm used to working in editors and attaching scripts to components etc). So for instance, I have a spin button in the game that has 4-5 functions for the state of the button. Would it be possible to split this down into a separate class just for this button, and have them communicate with the main game file? Similar scenario with a few functions I have for preloading webfonts (based on http://www.enea.sk/blog/preloading-web-font-pixi.js.html). Just trying to lay things out the best I can before I end up with a mammoth js file! Know this maybe pretty basic javascript coding to some, but if there are any pointers, or tutorials out there that cover this side of things, it would be very greatly appreciated! Thanks in advance!
-
Hi people! As i already discussed in an another topic in this forum, i'm having troubles with the collide function of the standard physic: I've checked with some log and apparently it is never called, even if the bodies on the scene push each other congruently with the collisionGroups and the collideAganist. Any ideas about what i'm missing? Thanks!
-
http://babylonjs-playground.com/#A83GX#0 Hi All, I have been playing with babylonjs for a couple of days now and excited about it. It's one of the few friendly/easier frameworks that I have come across so far. I even managed to import a couple of models into BJS successfully. But I have a problem and need your help. : ) This is the playground link, right now an arcrotatecamera rotates around a mesh. It gives an illusion that the mesh itself is being rotated, but when I move the object away from (0,0,0) it starts to show that the camera is rotating and not the object. Instead of such a camera hack, I would like to rotate the mesh itself from wherever it is, I googled and found a couple of topics in the forum, but the solutions are not as smooth or eased as the camera solution. It will be great if someone can help me on this. Cheers and thanks for your help in advance.
-
Hi there! Newbie to phaser. I seem to have some issues with my code. For some reason, the hitEnemy function never seems to run when my bullets (from weapon group) hit an enemy. Here's the code. I've removed parts that don't matter. I'd love if you could find out what happened and why.. and also how to fix it. -
Hey guys! I wanted to create "can you place building here?". Sometimes I get wrong answer. I create net 10x10 createNet(width, height) { this.net.removeChildren(); for(let i = 0; i < height; i++) { for( let j = 0; j < width; j++) { this.net.create(j*16, i*16, 'net'); } } this.net.forEach( o => o.anchor.set(0.5, 0.5)); this.net.setAll('alpha', '0.5'); } I have callback: game.input.addMoveCallback( (o) => this.updateGrid()); where i try to update color updateGrid() { let x = game.input.activePointer.x ; let y = game.input.activePointer.y; x -= (x-8) % 16; y -= (y-8) % 16; if ( x != this.net.x || y != this.net.y ) { this.net.x = x; this.net.y = y; this.net.forEach(o => this.updateColor(o)); } } updateColor(o) { o.frame = game.physics.arcade.overlap(o, this.obstacles ) ? 1 : 0; } http://pastebin.com/2jME8vbg - here is more code, I also attached full project. I feel right x/y or frame is update too late but I don't know how to prevent it. buildingPlacer.zip
-
Hi there, Let me start off I'm a real noob at programming, one of my friends got me into this to keep me occupied during sleepless nights :P.... so I started out with the Hello World project, edited it a bit to draw a sprite, move it around with the keys, and afterwards I decided I wanted to make him jump. looked for an example using the Arcade physics, edited my code which looks something like this : window.onload = function() { var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update : update , render: render }); function preload () { game.load.image('logo', 'assets/man.jpg'); } var logo; function create () { // var logo; game.stage.backgroundColor = '#2d2d2d'; game.physics.startSystem(Phaser.Physics.ARCADE); logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); // gravity mods // set the world (global) gravity game.physics.arcade.gravity.y = 100; game.physics.enable( [ logo ], Phaser.Physics.ARCADE); // i suppose this is to make it bounce against the rendered window its bounds logo.body.collideWorldBounds = true; logo.body.bounce.y = 0.8; } function update () { if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)){ logo.x -= 4; } else if ( game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { logo.x += 4; } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)){ logo.y -= 4; } else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)){ logo.y += 4; } } function render() { //game.debug.spriteInfo(logo,20,32); } }; as you might have noticed, I commented some lines out to see if it would fix something... whenever I comment the game.physics.startSystem out, the sprite will respond to the keys pressed. when I remove the comment, phaser just draws a blank screen. ive been trying to adapt my code to multiple examples as shown on the phaser.io page, but I can't get it working. a little bit of help ( even with programming syntax !!! ) would be a real neat and wonderful help thank you guys for reading this if you got this far
-
Hi, im new to the forums. I recently came across this opensource game, browserquest, and i thought how better to learn how to program a game by playing with its insides. However, I dont know where to begin when it comes to what tools Im going to need to look at the code and such. btw the title is from how i learned to make some pretty cool technical maps on starcraft back in the day by just playing with other peoples maps and learning from that.
-
tl;dr: 1. After copying a project template, are you supposed to also copy the phaser.js or phaser.min.js from the build folder into your game file? 2. Do you have to make the css and assets folders on your own? 3. when you separate your css, html, and js folder, how do you call them in your html file? 4. What are the bare necessities you need to make a game that you will wrap using CocoonJS for iPhone and Android? Smart Watches? full length: So I just finished the "Getting Started" tutorial on Phaser's website; although I found it useful, I felt that it did not properly address how to start a new entirely from scratch( i.e. GitHub repo). My understanding right now is that you should copy the "Basic" or "Full Screen Mobile" project templates from the resource folder into your text editor and then I'm confused at this point. Are you supposed to also copy the phaser.js or phaser.min.js from the build folder into your game file? What about the css and assets folders? Are you also supposed to make those on your own as well? I just thought it was confusing how the "Getting Started" tutorial had everything in it's own one file (css, html, and js) and I know I want to separate my different file types into their own folders (btw, when you separate your css, html, and js folder, how do you call them in your html file?). I am coming from an Android Studio (using LibGDX) background where new projects automatically have all the folders you need to make an app (assets, MyGDXGame, Manifest, Java, and some other files you'd only touch once), so having to copy/paste/create a new folder (to make your game playable) into your game file is very foreign to me. I'm just trying to get started with a simple ball-maze game for mobile platforms (iPhone, Android, and maybe smart watches). Thanks!
-
Hello all, I'm new here and I am just getting into game development. I created a pong game from scratch (The file and code is attached). The game works and I'm happy with it, except for one little glitch that it has. Sometimes when the ball hits a wall or one of the paddles, it will stick for a moment in time before bouncing away. I know that it has something to do with the way I update the balls location using the variable time. I used this because I followed a quick tutorial for the game loop. Just wondering if someone with more experience could shed some light on this issue and how to get rid of it. Thanks in advance for any help!!! David test.html
-
I am using a PIXI.WebGLRenderer and calling its render method on my stage which renders everything that is a child of the stage. Does this method loose efficiency if the stage has children that are off screen? Should I be removing objects that have gone off the screen so the renderer doesnt try to draw them or is the renderer smart enough not to draw that object? I am making a game with a tiled map and I want to know if I should be removing the tiles from the stage when they have scrolled off screen and then add them back when we go back to that part of the map or does it not matter? thank you
