BayBayMan

Need guidance on pixel art.

Recommended Posts

I have plans on making a small top down rpg using unity to get acquainted with the engine. Although, I also want to make my own 2D pixel art. I have experience making sprites, and I also have experience programming. My only problem are the dimensions of which the characters, items, backgrounds should be drawn in.

I see a lot of pixel art assets that have dimensions set at 32 bit, 16 bit and 8 bit. I'm assuming that's based on the color palette. Right now I have a character drawn on Photoshop, but the dimensions are not exactly symmetrical. Is there some tutorial out there that describes the standards for every top down 2D rpg? I would like to know how many pixels each side should be for characters, and generally everything else. I am afraid if I make the character a scale different than the tiles, it'll look out of place. 

My Photoshop canvas is set up for 2D pixel art, with guidelines and grids. I am also using a 300x300 pixel canvas, so I don't know how to use the space accordingly. 

Overall, I am lost on what to follow. I don't know whether I should just keep making the characters the way I'm making them, or have them sized according the the entire tileset. If someone could guide me to a blogpost, tutorial or paper talking about this subject, I would greatly appreciate it! It's what's holding me back at the moment. I will try using free assets for now, but I plan on making my own for later.

Share this post


Link to post
Share on other sites

Youtube is your friend. There are HUNDREDS of pixel art tutorials on there. Not all of them are great but still most are useful. I would do a lot of drawing and traditional sketches first. Concept out your game in full before you get into production. Also know that not every asset you create will be used. You REALLY want to create more assets than you actually use. You want to chose from a massive pool and chose the best ones rather than relying on every piece being essential. 

Also there are methods to upscaling your game to 1080 without worrying about being the right size. As long as your art has the pixel art look you're going for you'll be alright. 

Sorry I wasn't more specific. I'm actually just getting into pixel art myself, generating a one-minute pixel art intro scene for a game. Best of luck!

Share this post


Link to post
Share on other sites

This may sound silly but a good way to learn to do pixel art is to use Mario Paint. That game has a stamp editor which lets you create 16x16 pixel sprites. I can literally sit for hours just making sprites and drawing things in the paint. So here's an idea... First create a profile in photoshop that is 16x16 pixels wide or 32x32 pixels - a stamp. Set up the grid to be 1x1 pixels and show the grid lines. Place guides at the centers of the square (both vertical and horizontal) and possible show the units in pixels at the edges of the drawing area. Now you got a good work space to start with. Let me know if this works out and good luck with your project and remember to have fun!

Share this post


Link to post
Share on other sites

That depends mostly on what you want but for myself, I usually use a grid of 64X64 for characters and 32X32 fo tiles. By doing so, my characters a little bit bigger but still fits in the game. But I was using it for platformer though. So I don't know if that helps.

Also, try not resizing it when importing in Unity or when doing the Spritesheet.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Announcements

  • Forum Statistics

    • Total Topics
      628333
    • Total Posts
      2982139
  • Similar Content

    • By BAG Labs
      Mobile SoS

      Platform: Android
      Genre: Board
      Link: Google Play
       
      This games sharpen memory and test your strategies to place S-O-S pattern within time limit and serve 3 difficulties as Easy, Normal, and Hard.

      Goals of the game is to put S-O-S words in patterns (Horizontal, Vertical, and Diagonal) alternately with enemy.
       
      Features:
      Single Player Multiplayer Achievements Leaderboards  
       
      Screenshot:

       

       

       
      Link: Google Play
       
      Please help us improve this game with review
    • By Connor Rust
      I am currently attempting to make a navigation mesh for our 2D top down game, which is a multiplayer game using Node.js as the server communication. At the moment, I have implemented A* over an obstacle hardnessmap, which is awfully slow and laggy at times when we test our game on Heroku. I have been trying to find an algorithm to automatically generate the navmesh after map creation, instead of me having to do this manually. I am currently attempting to use Delaunay's Triangulation Divide and Conquer algorithm, but I am running into some issues. I have already asked a question on StackOverflow and am not getting many suggestions and help from it, so I figured I would come here. Is there another algorithm that might be better to use for the navmesh generation in comparison to Deluanay's Triangulation? My current implementation seems extremely buggy during the merge step and I cannot find the error. I have checked over the code countless times, comparing it to the description of the algorithm from http://www.geom.uiuc.edu/~samuelp/del_project.html. 
      My current code is this:
      class MapNode { constructor(x, y) { this.position = new Vector(x, y); this.neighbors = []; } distance(n) { return this.position.distance(n.position); } inNeighbor(n) { for (let i = 0; i < this.neighbors.length; i++) { if (this.neighbors[i] === n) return true; } return false; } addNeighbor(n) { this.neighbors = this.neighbors.filter((node) => node != n); this.neighbors.push(n); } addNeighbors(arr) { let self = this; arr.forEach((n) => self.neighbors.push(n)); } removeNeighbor(n) { this.neighbors = this.neighbors.filter((neighbor) => neighbor != n); } } class Triangle { constructor(p1, p2, p3) { this.p1 = p1; this.p2 = p2; this.p3 = p3; this.neighbors = []; } addNeighbors(n) { this.neighbors.push(n); } } function genSubMat(matrix, ignoreCol) { let r = []; for (let i = 0; i < matrix.length - 1; i++) { r.push([]); for (let j = 0; j < matrix[0].length; j++) { if (j != ignoreCol) r[i].push(matrix[i + 1][j]); } } return r; } function determinantSqMat(matrix) { if (matrix.length != matrix[0].length) return false; if (matrix.length === 2) return matrix[0][0] * matrix[1][1] - matrix[1][0] * matrix[0][1]; let det = 0; for (let i = 0; i < matrix.length; i++) { let r = genSubMat(matrix, i); let tmp = matrix[0][i] * determinantSqMat(r); if (i % 2 == 0) det += tmp; else det -= tmp; } return -det; } // if d is in the circle formed by points a, b, and c, return > 0 // d is on circle, return 0 // d is outside of circle, return < 0 function inCircle(a, b, c, d) { let arr = [a, b, c, d]; let mat = [ [], [], [], [] ]; for (let i = 0; i < arr.length; i++) { mat[i][0] = 1; mat[i][1] = arr[i].position.x; mat[i][2] = arr[i].position.y; mat[i][3] = arr[i].position.x * arr[i].position.x + arr[i].position.y * arr[i].position.y; } return determinantSqMat(mat); } function walkable(from, to, hardnessMap) { let diff = new Vector(to.x - from.x, to.y - from.y); if (Math.abs(diff.x) > Math.abs(diff.y)) diff.scale(Math.abs(1 / diff.x)); else diff.scale(Math.abs(1 / diff.y)); let current = new Vector(from.x + diff.x, from.y + diff.y); while (Math.round(current.x) != to.x || Math.round(current.y) != to.y) { if (hardnessMap[Math.floor(current.y)][Math.floor(current.x)] === 1) return false; current.x += diff.x; current.y += diff.y; } return true; } function getLowest(nodes) { let lowest = nodes[0]; for (let i = 1; i < nodes.length; i++) { if (nodes[i].position.y < lowest.position.y) lowest = nodes[i]; } return lowest; } // returns the angle between 2 vectors, if cw is true, then return clockwise angle between, // else return the ccw angle between. b is the "hinge" point function angleBetween(a, b, c, cw) { let ba = new Vector(a.position.x - b.position.x, a.position.y - b.position.y); let bc = new Vector(c.position.x - b.position.x, c.position.y - b.position.y); let v0 = new Vector(0, 1); let angleBA = v0.angleBetween(ba) * 180 / Math.PI; if (angleBA < 0) angleBA += 360; let angleBC = v0.angleBetween(bc) * 180 / Math.PI; if (angleBC < 0) angleBC += 360; let smallest = Math.min(angleBA, angleBC); let largest = Math.max(angleBA, angleBC); let angle = largest - smallest; return (cw) ? angle : 360 - angle; } function sortSmallestAngle(a, b, list, cw) { list.sort((m, n) => { let vab = new Vector(a.position.x - b.position.x, a.position.y - b.position.y); let vmb = new Vector(m.position.x - b.position.x, m.position.y - b.position.y); let vnb = new Vector(n.position.x - b.position.x, n.position.y - b.position.y); if (cw) return vab.angleBetween(vmb, cw) - vab.angleBetween(vnb, cw); else return vab.angleBetween(vnb, cw) - vab.angleBetween(vmb, cw); }); } // a is in list, b is in the other list function getPotential(a, b, list, cw) { sortSmallestAngle(b, a, list, cw); for (let i = 0; i < list.length - 1; i++) { let angle = angleBetween(b, a, list[i], cw); if (angle > 180) return false; else if (inCircle(a, b, list[i], list[i + 1]) <= 0) return list[i]; else { a.removeNeighbor(list[i]); list[i].removeNeighbor(a); } } let potential = list[list.length - 1]; if (potential) { let angle = angleBetween(a, b, potential, cw); if (angle > 180) return false; return potential; } return false; } function merge(leftNodes, rightNodes, leftBase, rightBase, hardnessMap) { leftBase.addNeighbor(rightBase); rightBase.addNeighbor(leftBase); let newLeft = leftNodes.filter((n) => n != leftBase); let newRight = rightNodes.filter((n) => n != rightBase); let potentialLeft = getPotential(leftBase, rightBase, newLeft, false); let potentialRight = getPotential(rightBase, leftBase, newRight, true); if (!potentialLeft && !potentialRight) return; else if (potentialLeft && !potentialRight) merge(newLeft, newRight, potentialLeft, rightBase, hardnessMap); else if (potentialRight && !potentialLeft) merge(newLeft, newRight, leftBase, potentialRight, hardnessMap); else { if (inCircle(leftBase, rightBase, potentialLeft, potentialRight) <= 0) merge(newLeft, newRight, potentialLeft, rightBase, hardnessMap); if (inCircle(leftBase, rightBase, potentialRight, potentialLeft) <= 0) merge(newLeft, newRight, leftBase, potentialRight, hardnessMap); } } // divide and conquer algorithm function delaunay(nodes, hardnessMap) { if (nodes.length <= 3) { for (let i = 0; i < nodes.length; i++) for (let j = 0; j < nodes.length; j++) if (i != j) nodes[i].addNeighbor(nodes[j]); return nodes; } else { nodes.sort((a, b) => { let tmp = a.position.x - b.position.x; if (tmp === 0) return b.position.y - a.position.y; return tmp; }); let l = nodes.length; let leftNodes; let rightNodes; if (l === 4) { leftNodes = delaunay(nodes.slice(0, 3), hardnessMap); rightNodes = delaunay(nodes.slice(3, 4), hardnessMap); } else { leftNodes = delaunay(nodes.slice(0, Math.floor(nodes.length / 2)), hardnessMap); rightNodes = delaunay(nodes.slice(Math.floor(nodes.length / 2), nodes.length), hardnessMap); } let leftBase = getLowest(leftNodes); let rightBase = getLowest(rightNodes); merge(leftNodes, rightNodes, leftBase, rightBase, hardnessMap); console.log("=============================MergeComplete================================"); return nodes; } }  
    • By Hilster
      Hello 2D Artists,
      I've started making a 2D Puzzle Adventure game for mobile and I'm looking for someone who would want in on creating assets for the game. The core of the programming is pretty much complete, you can walk within the grid laid out and push boxes, when there is an object on top of a pressure pad it will activate the linked objects or if there is one object with multiple linked pressure pads it requires you to activate all points for the object to become active. 

      The level iteration for the game is quick and simple, a Photoshop file that is made of individual pixels that represents objects is put into the game and it creates the level out of those pixels with the assigned objects.
      The objects that need sprites created so far is the character, box, pressure pad, door, trap door, the walls, the stairs and the tiled background.
      I intend to add more objects so the amount I'd like to add will be extended.
      My motivations for posting here is to have something that looks nice to be able to display on my portfolio, so if you're looking for a working game that you can place your art into and improve the look of your portfolio then we're in business.
      Please reply with a few past examples of your art below and I'll be in touch!
    • By suliman
      Hi!
      My game is coming along nicely and I would love some feedback.
      You play as one (or two in co-op) survivor that must travel the land and survive the infected hordes, looners and bandits. You stop in locations but are always pressed as the hordes will start pouring in. Collect resources (food, fuel, medical supplies and ammo) and weapons and head for the goal!
      Tips
      Always quickly switch to a melee weapon if running out of ammo Loot everything if you have time to loot, including cartrunks Choose locations that have the loot you need (such as gas station for fuel) Try to avoid running out of fuel or having your car break down. Walking is dangerous! Download (50 MB, works with windows only, you DON'T need dropbox to download):
      Damnation road (beta 2)




    • By MeeMaster
      I am a beginner in the Game Dev business, however I plan to build a futuristic MMO with some interesting mechanics.
      However, I have some doubts about shooting mechanics that I chose for this game and would like to know your opinion on this. The mechanic goes as follows:
      - Each gun would have it's damage-per-shot value
      - Each gun would have it's shots-per-second value
      - Each gun would have it's accuracy rating
      Now the question is: how to calculate the output damage? I have three available options:
      1) Calculate the chance of each shot hitting the target (per-shot accuracy)
      2) Multiply the damage output of a weapon by it's accuracy rating (weapon with 50% accuracy deals 50% of it's base damage)
      3) Don't use accuracy at all and just adjust the weapon damage output
      Which of these three mechanics would you like to see in a game? Mind, this will be an MMO game, so it will have lock-on targets, AoE effects and all that jazz.
  • Popular Now