Search the Community

Animation Feast is all about giving the most excellent 2D animation services in the shortest amount of time and at the most economical prices. With a team of top-industry designers, illustrators, developers, and strategists, we turn all your problems into solutions. Our Services Include: Whiteboard Animation 2d Animation Motion Graphics Animated Logo Explainer Video

So, I guess it's time to show my latest project to wide public: https://github.com/Guevara-chan/Ammo-0 Link to play it directly right now: https://guevara-chan.github.io/Ammo-0/main.html Ammo:0 is an experimental game prototype (with stock graphics so far), designed to explore and refine basic concepts of antoshooter subgenre. It features warped space, intense explosions, rockets, rockets and some more rockets. Did I said about rockets already ? Oh, right. Tell me what you think about concept itself and current premise.

Hi, Context I'm building a 2D game from scratch in JS. I'm drawing the map by using rpgmxp tilesets for the moment just to have some resources : Each tile is 32*32 pixels. I'm using canvas API with ctx.drawImage method to display it : ctx.drawImage(tile.tilesetImg, tile.sX, tile.sY, this.tile.w, this.tile.h, canvasX, canvasY, Engine.Camera.tile.w, Engine.Camera.tile.h); I use different parameters for the image source size (this.tile.w & this.tile.h) and the image destination size (Engine.Camera.tile.w, Engine.Camera.tile.h). This has the effect of scaling the game, like that each user have the same map exactly displayed (32 tiles * 24 tiles). The current tile aspect ratio distortion doesn't matter to me for the moment. Check 1.png to see the result displayed to the player with a 4:3 ratio. Problem When I change window size if I don't keep the ratio 4:3 (because i display always 32 tiles * 24 tiles for the player) one of my tile types causes strange visual artifacts. This happens in chrome and firefox and probably all browsers. It's strange because all the other tiles are drawn from the same method, but do not exhibit this behavior. This behavior only seems to occur when the ratio is very different from 4:3. See 3.png to check what i'm talking about. There is some transparent lines which display the background at the right of each "bad" tile. Note this tile happens to be the first tile from the tileset (first image above). The same thing happens if height alone is changed, except the line will appear on the bottom instead. The thing which is again more strange is that if i change the tileset to draw a red line at the right of the first tile (check 4.png) the transparent line is replaced by the red line when drawing the map (check 5.png). Question From debugging (console.log), there doesn't apear to be any reason that tile source size would be 33px instead of 32px, but the artifacting effect makes it seem like this is the case. I appear to be using drawImage correctly by all accounts, so googled to see if this was a known problem. I was reading the w3 documentation https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas when I found that : (especially the last note of part 12) Does this explain the problem ? Does any one know what the problem is more in detail ? Thank you in advance, best regards.

i am new in phaser and successfully made a game.But the problem i faced is when i compile it with phone gap or intel XDK the the phone button like backbutton doesn't work properly.The whole game exit in one press of back button. I want to use a confirmation massge like "Do you want to exit " like general app does.After conformation the game will exit.How can i do this?...It will be very kind of you and helful if you answer ...Thanks in Advance.

Hi, This is my first game and i developed with Phaser framework. This is a arcade game which depicts world war dogfight with five different background. Player can dive and kill as much as enemies and hide inside clouds to escape from enemies. I have uploaded this game on Kongregate and itch.io. This also plays in mobile. Pls let me know your suggestions. http://www.kongregate.com/games/mdiliyas/aerial-dogfight https://grapix.itch.io/aerail-dogfight regards iliyas

Hey guys, my first post here I tried Unity5 days ago and worked out this demo : http://opengg.me/940/spaceshooter-simple-unity3d-game/ Unity5 turns out to be an outstanding game engine to develop a WebGL Game, the problems are: The code size is still too large, 19MB of JavaScript code, taking too much time to generate, load and execute.WebGL on mobile is still a mess, making any game built by Unity5 not available to a majority of mobile web browsers.Even on the best performing mobile devices like Nvidia Tegra K1, an Unity5 WebGL build still takes too much performance cost, FPS below 30, making it less appealing than the native builds.Unity's 2D games cant make use of 2d context of html5 canvas, they use WebGL context, same as 3D games, so still suffer the problems above.So, I want a more mobile-friendly game engine, requirements including: Mobile-friendly: I can use 2d context of html5 canvas whenever I want, and the final builds should be less than 10MB with an empty scene. Productive: An editor/ide that somewhere near the Unity Editor, with features like spritesheet editing, scene hierarchy/inspector, animation controller/finite state machine. I just cant go back to handcraft everything again. Well-performed: Not just 60 FPS on PC browsers, a rogue-like tile game or a srolling space-shooter game should be jank-free on mobile chrome, 30FPS above. Physics: Simple colliders and rigibody support is good enough.Is there a game engine that meets these requirements?

Hi! My name is Sandra Pinkert and I'm an 2D Game Artist & Animator. I'm currently looking for some more paid freelance work. I have experience working for PC, mobile and browser games alike. I'm offering anything from concepting to final assets, including character design, backgrounds, tiling,animations, effects and promotional art. My full Resumé and Portfolio you can find here: http://sandrapinkertportfolio.weebly.com Contact me for estimates or further questions. For estimates please enclose the exact number ofassets and animations needed, the style desired and until when you want everything done. Thanks! Yours sincerely, Sandra http://sandrapinkertportfolio.weebly.com/uploads/1/7/3/9/17390167/7947069_orig.jpg

Hi, I am working on an RPG like game. I am using an ASCII Map drawn by an algorithm that I found online. So right now my objective is getting collision detection working with the player. However, when I try to add the text to a group it works, but when the player hits against any part of the map the hit detection does not work. So i am kind of stuck. Please help me! Thanks in advance Here is my code: // font sizevar FONT = 22;//var Height and Width for the Map's COLS and ROWSvar HEIGHT = 550;var WIDTH = 800;//Key variable set upvar cursors;var spaceKey;//offset for map's positionvar MAP_OFFSET = 2.38;//Game's height and widthvar gameHeight = 600, gameWidth = 800;//text for the mapvar text;//Style of textvar style = { font: FONT + "px monospace", fill:"#fff"};// map dimensionsvar ROWS = HEIGHT/FONT;var COLS = WIDTH/FONT/0.61;// number of actors per level, including playervar ACTORS = 10;// the structure of the mapvar map;//group the map objectsvar mapGroup; // the ascii display, as a 2d array of charactersvar asciidisplay;// initialize phaser, call create() once donevar game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update});var graphics;function preload() { /* Using a square instead for now don't like the charcter */ //game.load.spritesheet('dude', 'assets/dude.png', 32, 48); graphics = game.add.graphics(0,0); graphics.beginFill("0xFF700B", 1); graphics.lineStyle(2, 0x0000FF, 1); graphics.drawRect(20, game.height - 550, 25, 25); graphics.endFill();}function create() { //Start game physics game.physics.startSystem(Phaser.Physics.ARCADE); // initialize map initMap(maze(ROWS, COLS)); // initialize ascii display asciidisplay = []; for (var y=0; y<ROWS; y++) { var newRow = []; asciidisplay.push(newRow); for (var x=0;x<COLS;x++) newRow.push(initCell('', x, y + MAP_OFFSET)); } drawMap(); // the map group mapGroup = game.add.group(); mapGroup.add(text); console.log(mapGroup); game.physics.arcade.enable(mapGroup); player = game.add.sprite(0, 0); player.addChild(graphics); game.physics.arcade.enable(player); cursors = game.input.keyboard.createCursorKeys();}function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -150; //player.animations.play('left'); } else if (cursors.right.isDown) { player.body.velocity.x = 150; //player.animations.play('right'); } else if (cursors.up.isDown) { //Move up the screen player.body.velocity.y = -150; } else if (cursors.down.isDown) { //Move down the screen player.body.velocity.y = 150; } game.physics.arcade.collide(player.body, mapGroup.child, stopPlayer);}function initCell(chr, x, y) { // add a single cell in a given position to the ascii display text = game.add.text(FONT*0.6*x, FONT*y, chr, style); return text;}//creating the mapfunction initMap(m) { // create a new random map map = []; for (var j= 0; j<m.x*2+1; j++) { var line= []; if (0 == j%2) for (var k=0; k<m.y*4+1; k++) if (0 == k%4) line[k]= '+'; else if (j>0 && m.verti[j/2-1][Math.floor(k/4)]) line[k]= ' '; else line[k]= '-'; else for (var k=0; k<m.y*4+1; k++) if (0 == k%4) if (k>0 && m.horiz[(j-1)/2][k/4-1]) line[k]= ' '; else line[k]= '|'; else line[k]= ' '; if (0 == j) line[1]= line[2]= line[3]= ' '; if (m.x*2-1 == j) line[4*m.y]= ' '; map.push(line.join('')+'\r\n'); } return map.join('');}function drawMap() { for (var y = 0; y < ROWS; y++) for (var x = 0; x < COLS; x++) asciidisplay[y][x].text = map[y][x];}function maze(x,y) { var n=x*y-1; if (n<0) {alert("illegal maze dimensions");return;} var horiz =[]; for (var j= 0; j<x+1; j++) horiz[j]= [], verti =[]; for (var j= 0; j<y+1; j++) verti[j]= [], here = [Math.floor(Math.random()*x), Math.floor(Math.random()*y)], path = [here], unvisited = []; for (var j = 0; j<x+2; j++) { unvisited[j] = []; for (var k= 0; k<y+1; k++) unvisited[j].push(j>0 && j<x+1 && k>0 && (j != here[0]+1 || k != here[1]+1)); } while (0<n) { var potential = [[here[0]+1, here[1]], [here[0],here[1]+1], [here[0]-1, here[1]], [here[0],here[1]-1]]; var neighbors = []; for (var j = 0; j < 4; j++) if (unvisited[potential[j][0]+1][potential[j][1]+1]) neighbors.push(potential[j]); if (neighbors.length) { n = n-1; next= neighbors[Math.floor(Math.random()*neighbors.length)]; unvisited[next[0]+1][next[1]+1]= false; if (next[0] == here[0]) horiz[next[0]][(next[1]+here[1]-1)/2]= true; else verti[(next[0]+here[0]-1)/2][next[1]]= true; path.push(here = next); } else here = path.pop(); } return {x: x, y: y, horiz: horiz, verti: verti};}function stopPlayer() { player.body.velocity = 0; console.log("stopped");}Thank You for your help in advance!

Hi, this is my first post on here. Anyways I need help trying to solve this problem. I am making a 2D rpg game, and for now I am using a 2D array map on Phaser JS as a place holder for an actual map in the future. I need the map to generate randomly every time. I have tried my code on Phaser version 1.12 and it works. However, when I tried it on the latest version (v2.2.0) of Phaser, it did not work. I keep getting an error saying "Uncaught TypeError: Cannot set property 'content' of undefined". Here is my source code: // font sizevar FONT = 22;//Map's Displayvar mapText;//var Height and Width for the Map's COLS and ROWSvar HEIGHT = 550;var WIDTH = 800;//Key variable set upvar cursors;var spaceKey;//offset for map's positionvar MAP_OFFSET = 2.38;//Game's height and widthvar gameHeight = 600, gameWidth = 800;//Style of textvar style = { font: FONT + "px monospace", fill:"#fff"};// map dimensionsvar ROWS = HEIGHT/FONT;var COLS = WIDTH/FONT/0.61;// number of actors per level, including playervar ACTORS = 10;// the structure of the mapvar map;// the ascii display, as a 2d array of charactersvar asciidisplay;// initialize phaser, call create() once donevar game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update});function preload() { game.load.spritesheet('dude', 'assets/dude.png', 32, 48);}function create() { game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(32, game.world.height - 150, 'dude'); game.physics.arcade.enable(player); player.body.gravity.y = 1500; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); //Subject to change: cursors = game.input.keyboard.createCursorKeys(); spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); // initialize map initMap(maze(ROWS, COLS)); // initialize ascii display asciidisplay = []; for (var y=0; y<ROWS; y++) { var newRow = []; asciidisplay.push(newRow); for (var x=0;x<COLS;x++) newRow.push(initCell('', x, y + MAP_OFFSET)); } drawMap();}function update() { player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { player.body.velocity.x = 150; player.animations.play('right'); } else { //Stand Still player.animations.stop(); player.frame = 4; } if (spaceKey.isDown) { player.body.velocity.y = -550; }}function initCell(chr, x, y) { // add a single cell in a given position to the ascii display game.add.text(FONT*0.6*x, FONT*y, chr, style);}//creating the mapfunction initMap(m) { // create a new random map map = []; for (var j= 0; j<m.x*2+1; j++) { var line= []; if (0 == j%2) for (var k=0; k<m.y*4+1; k++) if (0 == k%4) line[k]= '+'; else if (j>0 && m.verti[j/2-1][Math.floor(k/4)]) line[k]= ' '; else line[k]= '-'; else for (var k=0; k<m.y*4+1; k++) if (0 == k%4) if (k>0 && m.horiz[(j-1)/2][k/4-1]) line[k]= ' '; else line[k]= '|'; else line[k]= ' '; if (0 == j) line[1]= line[2]= line[3]= ' '; if (m.x*2-1 == j) line[4*m.y]= ' '; map.push(line.join('')+'\r\n'); } return map.join('');}function drawMap() { for (var y = 0; y < ROWS; y++) for (var x = 0; x < COLS; x++) asciidisplay[y][x].content = map[y][x];}function maze(x,y) { var n=x*y-1; if (n<0) {alert("illegal maze dimensions");return;} var horiz =[]; for (var j= 0; j<x+1; j++) horiz[j]= [], verti =[]; for (var j= 0; j<y+1; j++) verti[j]= [], here = [Math.floor(Math.random()*x), Math.floor(Math.random()*y)], path = [here], unvisited = []; for (var j = 0; j<x+2; j++) { unvisited[j] = []; for (var k= 0; k<y+1; k++) unvisited[j].push(j>0 && j<x+1 && k>0 && (j != here[0]+1 || k != here[1]+1)); } while (0<n) { var potential = [[here[0]+1, here[1]], [here[0],here[1]+1], [here[0]-1, here[1]], [here[0],here[1]-1]]; var neighbors = []; for (var j = 0; j < 4; j++) if (unvisited[potential[j][0]+1][potential[j][1]+1]) neighbors.push(potential[j]); if (neighbors.length) { n = n-1; next= neighbors[Math.floor(Math.random()*neighbors.length)]; unvisited[next[0]+1][next[1]+1]= false; if (next[0] == here[0]) horiz[next[0]][(next[1]+here[1]-1)/2]= true; else verti[(next[0]+here[0]-1)/2][next[1]]= true; path.push(here = next); } else here = path.pop(); } return {x: x, y: y, horiz: horiz, verti: verti};}That is just the Javascript file. Please tell me if you want my HTML code. Thanks! Links I used for tutorials to code this so far: http://gamedevelopment.tutsplus.com/tutorials/how-to-make-your-first-roguelike--gamedev-13677 (got the map) I also used an algorithm to generate the map details online. Please help and thanks in advance!

I'm new in the field of 2D game development and this is my first project http://codepen.io/mladen___/pen/fuFIH Can someone give me some advice? Or tell me if I'm doing something wrong. I'm trying to implement some JavaScript design pattern which I know from writing web-apps but it just does not work for me...

Dear forums users, Im stuck at something on my game. Im making a room search game but the problem is that i dont know how to switch rooms. I tried multiple tutorials and read multiple forums but it doesn't work for me. I hope you can help me! i attached my game code so that u can look into it. Ty in advance!