Search the Community

Showing results for tags 'help'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 166 results

  1. I am currently using the Phaser project template located on Github. I tried to search online for a way to minify my game files, yet I've ran into pages that talk about using 'GruntJS'. I am currently not familiar with the javascript task runner. Can anyone give me links to tutorials on how to minify phaser games? Or can anyone post a detailed description on how to do so? I would appreciate it greatly.
  2. hikaju96

    [Help] parent div mouse event

    phaser canvas maybe stop propagation as default so i can't use jqueryUI draggable over this parent div, please help.
  3. Hi everyone! I have a personal project that I need help with - mostly [basic] modeling and animation. I don't have any funding apart from my own paycheck, but I'm happy to pay, and spread the project out across paycheques as required. What I need (most important to least important): 1) A 3D shape to present two lines of text (one small and one large) and a circular logo I'm planning to use the GUI system to draw the text on a transparent plane just in front of the surfaces of the object I need to be able to change logo and text on the fly, and then animate the entire thing as a single object (rotation/flip and slide) Think of it like one of the boxes that slides from the bottom left corner of a news report or documentary with the name of the person being interviewed Materials, 3d shaping, texture, bump-mapping etc to add visual appeal, but I'm no artist A vague concept has been attached to this post 2) An animated asset to convey information about a playing song I'm most partial to the idea of a spinning record that I can put text on the label of, with a needle on the side A spinning CD would work An animated VU meter or spectrum peak graph would also work It will also need some kind of surface to place artist/track name on 3) A basic representation of a person Cone body, sphere head and disconnected sphere hands is absolutely fine I need to be able to change the colour of the body/shirt/whatever on the fly I need basic animations with: (1) waving a 'hand' in the air; (2) waving both 'hands' in the air; (3) clapping 'hands' above 'head'; (4) jumping and waving an oversized #1 foam hand in the air; and (5) bouncing (running gait) while waving 2 oversized foam hands in the air, possibly wearing a beer-bong hat. Assets will be presented on a flat (ortho, 90 degree) autonomous (non-interactive) stage, but will be spun, flipped and rotated, in addition to the required built-in animations. I will sort out the code side of things for the most part. PM me if you're interested.
  4. bluecake

    Effect of a torch on fire ?

    Hello, Here I would like to know how to do, to make the effect of a torch on fire on Phaser, in the genre we see only 10 cm around and the rest of the room is black? Sincerely and thank you
  5. So I am working on my just general knowledge of how phaser works, I have only done two tutorials. But I think I have a decent grasp on it so far. But I am running into a little problem, I am trying to use the Follower object, so that I don't have to create the vec2 and attach it, but I don't seem to understand the documentation or what it means by "If this Game Object is enabled for physics then this property will contain a reference to a Physics Body." I have scoured the docs for hours. I see how to 'enable' in arcade physics but I cannot find any reference to how with impact physics. I am able to create a body object, and assign it to the game object, as well as assign the the game object to the body, but they do not move in tandem. in fact the body does not move at all. P.S. This is not the only bug, when converting from matter.js to impact.js physics my logic on pausing player movement when the dialog modal broke. but one problem at a time.. P.P.S I know its not the best code //SHIVA path3 = new Phaser.Curves.Path(550, 450); path3.lineTo(450, 450); path3.lineTo(450, 505); path3.lineTo(550, 505); path3.lineTo(550, 450); path3.lineTo(450, 450); shiva = this.add.follower(path3, 550, 450, 'shiva'); //Phaser.GameObjects.BuildGameObject(this, Phaser.GameObjects.PathFollower) //, impact); shivaBody = this.impact.add.body(550, 450, 16, 12); //TRYING DIFFERENT WAS TO SET BODY //shivaBody.setOffset(550, 450, 16, 12); shiva.body = shivaBody; shivaBody.setGameObject(shiva); = "shiva"; shiva.setRotation(); shiva.depth = 30; //ALT WAY TO GET NAME // = "shiva"; shiva.setData(npc, true); shiva.setData("name", "shiva"); npcBodies[2] = shivaBody; npcs.add(shiva); shiva.startFollow({ ease: 'Linear', duration:6000, yoyo:true, repeat: -1, _delay: 200, delay: 100 }); P.P.P.S I also tried;; dialog_plugin.js game.js index.html city.json
  6. Lukripar

    Scene not defined.

    I'm trying to code a simple game using scenes. I am new to Phaser 3 and relatively new to coding in general so I may be making a dumb mistake. I've just hit a wall. I'm trying to get my main menu "start" button to start the game state. Simple enough right? But when I run the files on http-server, i get: ``ncaught ReferenceError: Game is not defined at testmain.js:6`` my html: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>FCM Classes Test</title> <script src="//"></script> </head> <body> <canvas id="canvas"></canvas> <script type="module" src="js/testmain.js"></script> <script type="module" src="js/scenes/game.js"></script> <script src="js/scenes/mainMenu.js"></script> <script src="js/scenes/preload.js"></script> </body> </html> main.js var config = { type: Phaser.AUTO, width: 800, height: 800, parent: "#canvas", scene: [Preload, MainMenu, Game ], title: 'Fantasy Cage Match' } let game = new Phaser.Game(config); mainMenu.js let startButton, menubg; class MainMenu extends Phaser.Scene{ constructor() { super({key: "MainMenu"}); } create() { this.menubg = this.add.image(400,400,'menubg'); this.startButton = this.add.sprite(400, 400, 'startbutton').setInteractive(); this.startButton.on('pointerdown', function startGame(pointer){ this.scene.start('gamescene'); }, this); } } and my game.js I haven't added any other code because I just want to see my sprite move around on screen.. (I know i haven't done anything with cursors yet..) import Player from '../characters/Player.js' let bg, cursors, player; class Game extends Phaser.Scene{ constructor() { super({key: "gamescene"}); } create(){ bg = this.add.image(400,400,'background'); player = this.add.sprite(400,400,'dude'); this.player = new Player(this) setupCollision(this) } } First time posting, so I'm sorry if I didn't follow correct etiquette. Thanks in advance for any ideas.
  7.;; var wallCollisionGroup =; var playerCollisionGroup =; var doorCollisionGroup =;; // I've created all the necessary collisions as in expamle: and it works perfect. player.body.collides(wallCollisionGroup); player.body.collides(doorCollisionGroup, wrongDoor, this); cursors =; } wrongDoor() { player.body.velocity.x = 0; player.body.velocity.y = 0; //player.body.setZeroVelocity(); //player.body.velocity.x = -20000; //player.body.velocity.y = -20000; //player.body.static = true; result = 'You last hit: The wall :)';'Message', 'text'); } update() { player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -300; } else if (cursors.right.isDown) { player.body.velocity.x = 300; } if (cursors.up.isDown) { player.body.velocity.y = -300; } else if (cursors.down.isDown) { player.body.velocity.y = 300; } } Hello. I'm making a game where player have to reach the right door and created all the necessary collisions and it works almost perfect, except the call back function wrongDoor. I want to create a dialog line when player collides wrong door and make his velocity = 0 while dialog line is on screen, but I can't. Every time player colldes the door dialog line displays on screen but the player sprite still moves. How can I make him stop on collision with door? All the //commented stuff I've tried and it didn't help. I tried to add this function in Update function but it triggers wrongDoor all the time and displays dialog line again and again from the start of the game. I've tried set velocity = -20000 but it doesn't set -20000 velocity, like it doesn't see the player. On screenshots I press up and right buttons so character moves up and right after wrongDoor triggers.
  8. DaedraKyne

    Graphic circle positioning

    Hi all! New member here! A few minutes ago, I was working on my game's prototype, when I realized something that kinda ticked me off 😅 So, I created two seperate graphics, both of them at the same position, containing each one circle (x = 0, y = 0), one of the circles with a fixed radius, and the other one with an increasing radius. Weirdly, these circles did not seem to be centered at the same spot, since the left side of the bigger circle is closer to the left side of the smaller circle, that the right side of the bigger circle to the right side of the smaller circle. Here are a few pics to show what I mean, as well as the code I used: Circles: Code: Edit: Btw, the radius is augment every time by 0.02, so it's not a full number.
  9. I have implemented a music visualizer here: I created a cool trail effect in "circle.js". But after a while, the memory leak so bad. Can you point out what wrong with my solution?
  10. programmerJohn

    onInputDown shenanigans

    <html> <head> <script src="phaser.js"></script> </head> <body> <h1>Card Game</h1> <script> var config = { type: Phaser.AUTO, width: 1200, height: 1000, scene: { preload: preload, create: create, update: update } }; game = new Phaser.Game(config); var counter = 0; function preload () { this.load.image('background', 'assets/background.jpg'); this.load.image('wolf', 'assets/wolf.png') } function create () { this.add.image(600, 500, 'background'); creature =; creature.inputEnableChildren = true; wolf = creature.create(600, 500, 'wolf'); wolf.onInputDown.add(listener, this); } function listener(sprite){ console.log('click'); } function update () { } </script> </body> </html> The code above is supposed to log "click" on the console whenever the wolf image is clicked but instead I get an error after multiple hours of trying to fix it, I conceded and came to ask for help. Many thanks in advanced.
  11. newbie11

    How to add a text value

    Hi! can anyone tell me how to put some value on my "score" i already use if (playState.score <= 3){ game.add.text(20, 20, "practice more",{font: '50px Sports World', fill: '#b7e2fe'}); but it doenst work var winState = { create: function () { game.add.tileSprite( 0, 0, 1000, 490, "background3") if (playState.score >= loadState.hiscore) { loadState.hiscore = playState.score; } var hiscoreLabel = game.add.text(473, 155, loadState.hiscore, {font: '50px Sports World', fill: '#fdf59e'}); var scoreLabel = game.add.text(473, 243, playState.score, {font: '50px Sports World', fill: '#b7e2fe'});; var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.addOnce (this.restart, this); var escKey = game.input.keyboard.addKey(Phaser.Keyboard.ESC) escKey.onDown.addOnce (this.menus, this); }, restart: function (){ game.state.start('play'); }, menus: function (){ game.state.start('menu'); }, } thats my code pls help me thank you!
  12. Mrblah

    First Game : Help

    i need a little help getting my code to work. I can't get the star score to increase. i can only make it go NAN... HELP ? "Making you own game" on the last part i'm having trouble making tht work.
  13. Hello to everyone, I'm currently developing a fan-made, retro-style and non-profit game with Phaser based on the TV show Stranger Things. The main idea is to do a Point and Click game like old classics (Monkey Island saga, Indiana Jones and the fate of atlantis, etc...) with retro pixel-art graphics and chiptune music. I'm looking for GFX and Music artists If you are interested to collaborate with this project please contact with me and I'll send you a link to see the work in progress. (Sorry if there are some grammar errors, I'm Spanish).
  14. Hi everyone, // If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen. To do this, I followed this tutorial : I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); // on ajoute un diamant game.load.image('dmd','assets/diamond.png') game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } var player; var platforms; var cursors; var stars; var diamonds; var score = 0; var scoreText; var countdown; function create() { // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game game.add.sprite(0, 0, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms =; // We will enable physics for any object that is created in this group platforms.enableBody = true; // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); // This stops it from falling away when you jump on it ground.body.immovable = true; // Now let's create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-100, 510, 'ground'); ledge.body.immovable = true; // The player and its settings player = game.add.sprite(32, - 150, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 350; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); // Finally some stars to collect stars =; // We will enable physics for any star that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 10; i++) { // Create a star inside of the 'stars' group var star = stars.create(i * 70, 0, 'star'); // Let gravity do its thing star.body.gravity.y = 15; // This just gives each star a slightly random bounce value star.body.bounce.y = 0.2 + Math.random() * 0.2; } // On ajoute les diamants; diamonds.enableBody=true; // création des diamants dans l'espace de jeu for (var i = 0; i < 3; i++) { var dmd = diamonds.create(i * 70, 0, 'dmd'); dmd.body.gravity.y = 30; dmd.body.bounce.y = 0.1 + Math.random() * 0.2; } countdown.startTime = new Date(); countdown.totalTime = 120; countdown.timeElapsed = 0; countdown.createTimer(); countdown.gameTimer =, function(){ countdown.updateTimer(); }); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { // Collide the player and the stars (et les diamants du coup) with the platforms game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(diamonds, platforms); game.physics.arcade.collide(player, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // idem pour les diamants game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150;'right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function collectStar (player, star) { // Removes the star from the screen star.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } function collectDiamonds (player, dmd) { dmd.kill(); score += 50; scoreText.text = 'Score: ' + score; } function createTimer(){ var countdown = this; countdown.timeLabel =, 100, "00:00", {font: "100px Arial", fill: "#fff"}); countdown.timeLabel.anchor.setTo(0.5, 0); countdown.timeLabel.align = 'center'; } function updateTimer (){ var countdown = this; var currentTime = new Date(); var timeDifference = countdown.startTime.getTime() - currentTime.getTime(); //Time elapsed in seconds countdown.timeElapsed = Math.abs(timeDifference / 1000); //Time remaining in seconds var timeRemaining = countdown.timeElapsed; //Convert seconds into minutes and seconds var minutes = Math.floor(countdown.timeElapsed / 60); var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes); //Display minutes, add a 0 to the start if less than 10 var result = (minutes < 10) ? "0" + minutes : minutes; //Display seconds, add a 0 to the start if less than 10 result += (seconds < 10) ? ":0" + seconds : ":" + seconds; countdown.timeLabel.text = result; if(countdown.timeElapsed >= countdown.totalTime){ // On cherche la fin du timer result = "Rate !"; } }
  15. Hi, Im new to game development in HTML, I wanna make a text-base RPG on html5, how can I begin?
  16. estudillod

    Help with scales?

    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, - 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
  17. bluecake

    [HELP] Group collider detection

    Hello, Today I started with Phaser, I worked a lot at school with when I had free time. But I have a problem I can't delete an item in my group when my character makes a collision an item belonging to the group. make my group: (in create function) game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.enable(character, Phaser.Physics.ARCADE); game.physics.enable(enemygroup, Phaser.Physics.ARCADE); enemygroup =; for(var i=0; i<10 ;i++) { var s = enemygroup.create(,, 'monster'); s.frame = 3; s.animations.add('enemymove', [2,3,4], 10, true);'enemymove'); game.physics.enable(s, Phaser.Physics.ARCADE); } for detect collider:(in update function) game.physics.arcade.collide(character, enemygroup, function(){ enemygroup.remove(this); }); /*OTHER WAY I HAVE TRY*/ for(var i = 0; i < enemygroup.length; i++) { if(game.physics.arcade.collide(character, enemygroup)) { enemygroup.remove(enemygroup[i]); } } Thanks you for help ! good development at all and sorry for my bad english (i'm french).
  18. Ahmed Khalifa

    Changing world position

    Hello everyone, I am trying to make the screen scale automatically based on the browser window. So I used the scale variable in world to scale it. I was trying to center it so I used the following code: = Math.floor(( - Global.SCALE * Global.WIDTH) / 2); = Math.floor(( - Global.SCALE * Global.HEIGHT) / 2); which didn't work nothing on the screen moved, I tried world.position.x/world.position.y and world.left/ and still nothing changed. Any help?
  19. Dimaslocoxtr

    Error in animations

    Hi, im new in phaser i have an error in animations when i press de right key i doesnt play the animation.
  20. Hi, I am trying to make a menu which lets the user bind the in-game inputs. But I have no idea how to do that... Maybe there is a way to detect which input he presses and then use this information when creating input... Thanks beforehand.
  21. For a day or two i have this weird issue that i can't fix. I am making a map with interactive trees. When i click tree i want it to change its texture to chopped trees. class Tree { constructor(sprite, deadTexture){ this.sprite = sprite; = 20; this.deadTexture = deadTexture; this.sprite.interactive = true; } chop(){ console.log("chop"); = 0; this.sprite.texture = this.deadTexture; } } let tree = new Tree( new PIXI.Sprite(textures.treesTexture), textures.choppedTreesTexture ); /*...*/ tree.sprite.on('click', () => { console.log("chop"); tree.sprite.texture = textures.choppedTreesTexture; }); this part works almost fine. I attached a gif that explains what is wrong. I don't know what to do and i can't find any help. What is causing such behaviour? if you need some more information about code, please let me know.
  22. Hello everybody I write my first application, add physics for my player, add cursors , input keyboards. En error you will see on the screenshots. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gameDiv'); var spacefield; var backgroundv; var player; var cursors; var mainState = { preload: function(){ game.load.image('starfield', "assets/starfield.png"); game.load.image('player', "assets/player.png"); }, create: function(){ spacefield = game.add.tileSprite(0, 0, 800, 600, 'starfield'); backgroundv = 5; game.add.sprite(, + 200, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); }, update: function(){ spacefield.tilePosition.y += backgroundv; if(cursors.left.isDown){ player.body.velocity.x = -350; } if(cursors.right.isDown){ player.body.velocity.x = 350; } } }; game.state.add('mainState', mainState); game.state.start('mainState'); Whats wrong?
  23. Good afternoon, I am attempting to run the first tutorial of Phaser JS ( after you setup your local server and save the files to the web root. This is the error I am getting when trying to put the star on the black background: Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/wamp64/www/phaser_tutorial_02/assets/star.png may not be loaded. at Object.b.createWebGLTexture (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:13974) at b.WebGLSpriteBatch.flush (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:22659) at b.WebGLSpriteBatch.render (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:20300) at b.Image.b.Sprite._renderWebGL (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:3:13555) at b.Stage.b.DisplayObjectContainer._renderWebGL (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:3:10848) at b.WebGLRenderer.renderDisplayObject (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:12898) at b.WebGLRenderer.render (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:4:12357) at b.Game.update (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:8:1288) at b.RequestAnimationFrame.updateRAF (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:11:18693) at window.requestAnimationFrame.forceSetTimeOut._onLoop (file:///C:/wamp64/www/phaser_tutorial_02/js/phaser.min.js:11:18587) Can someone help me solve this mystery. I am using Wamp and I am running the files through the localhost web server. Thank you so much for your help in advance, i am very excited to start coding games with Phaser. I have a degree in Web application development but I have yet to make a game. - Brian
  24. Hi everyone, I'm actually making a simple 2d platformer with arcade physic and I recently implemented a tiled tilemap which contain an "object layer". In this object layer I draw collision zone with the polyline tool. Now I want thoses "collision zones" to be recognized by phaser. Which mean : if the player overlap "object layer"'s content, it will blocked as if it was a wall. I just want to know if this is possible or if I must set collision "on" for my tile layers in which I may put all my walls tiles. Also, If I must use the 2nd solution, if my tile sprite is smaller than my 24x24 tile square (I attached an example), will the hitbox fit the sprite size or the 24x24 square ? Thanks beforehand.
  25. I'm trying to get a start in Phaser but there seems to be no way to create sprites of any form without having a server or doing development locally. I was hoping to be able to host all my games on jsfiddle. If I need a server would it also be possible to use simple shapes as sprites?