1
\$\begingroup\$

I recently started to work on a project which consists in developing a game similar to the Urbz on Gameboy Advance (the Handheld version of the game developed by Griptonite Games). This is mainly a project to learn how to make a video game from scratch, especially one in 2D (isometric in this case). I'm planning to use C++ with SFML for this project. I already have some skill in programming, but since I would also like to draw the art by myself and have no experience in that I was wondering how I could do that.

Especially, I was wondering how did the the team behind the Urbz draw their art and what kind of technique was being used? It doesn't seem to me a 'handcrafted' kind of pixel art :

enter image description here

enter image description here

I also made some research about developing a 2D isometric game engine. It seems that a popular technique is to draw the map from an isometric tileset (as shown here by eishiya for instance). However the team from Griptonite Games seems to have used several big maps, such as this :

enter image description here

Or am I getting things wrong ? What kind of engine/technique might have they been using ?

Many thanks for reading this post (and maybe for answering too) !

\$\endgroup\$
  • 5
    \$\begingroup\$ We generally can't answer "How did the developers of Game X implement feature Y?" — that's a question you'll have to ask the developers of that game directly. But we can answer "I'm having this specific problem with the strategy I'm using so far — how can I fix/improve it?" So, try editing your question to show us how you've attempted to create your pixel art so far, and what specifically about it you're looking to improve. Artist communities & forums can also be a great place to get more informal critique & tips. \$\endgroup\$ – DMGregory Mar 16 at 21:58
  • \$\begingroup\$ I believe the screenshots you posted were modeled in a 3d program and then rendered at the 'isometric' camera angle and saved as low bit sprites \$\endgroup\$ – CobaltHex Oct 1 at 20:06
0
\$\begingroup\$

(Disclaimer: this is a subjective response to a subjective question. That's art for ya!!)

All isometric game art is composed from tiles that look like this, can be broken down into tiles that look like this, or at the very least follows the principles that can be inferred from looking at these tiles and building off a foundation of 101-tier perspective construction knowledge:

A set of parallelograms composed of pixel lines with a slope of 0.5 or -0.5

Image description: A set of parallelograms composed of pixel lines with a slope of 0.5 or -0.5

"Isometric art" is literally just forms built primarily of lines that either run straight up and down, or have a slope of 0.5 or -0.5. There are exceptions to this rule in construction of forms, and this is illustrated by things like: the puddle, the flowers, and the curvy portions of the bus in one of the screenshots you shared in your question.

When you consider a 3D form that'd fit inside a cube-shaped bounding box, I want you to try and imagine that cube being distorted into a (when viewed in 2D) hexagonal shape built primarily from (you may have guessed it!) straight up and down lines and lines that follow the slope rule. The resulting perspective is what defines isometric art (imo).

Now, about achieving the exact aesthetic that Griptonite Games did, here's my best guess at their workflow:

  • The character art (Kris Thistle!!!) is literally just a low poly 3D model at a low resolution. If you want to recreate this, the method I would use (I'm not confident with texturing, which sorta requires knowledge of UV unwrapping, etc.) is to:

1.) create a low poly 3D model that I'd like to work with. it doesn't have to be perfect, but it should be as close as possible to reduce work down the pipeline 2.) create a new camera and angle it until it shows the way i would like the character to be seen 3.) keeping my 3D modeling software's default lighting setup, i would then assign flat color materials to different polygon sets on the mesh. the colors should be as close as possible to the most dominant hue/shade/tint/tone that'd be in that given region 4.) look through the camera created and positioned in step 2, take a screenshot, and do a final pixel art polishing pass in an external 2D art program

  • "Big maps" like the one you screenshot and shared with us are undoubtedly (imo) made from an isometric tileset, but if you want to spare yourself the woes of logistics there is a method you can use to achieve similar results by initially creating one big image:

1.) in a 2D art program, create or import an isometric grid (looks like cheesy wallpaper made of rhombus). layer this grid on top of whatever layer(s) you plan to create the art in, and optionally lower its opacity so you can see underneath 2.) draw, paint, or pixel your Big Map artwork on the lower layer(s), respecting or ignoring the iso grid as much as you'd like, but making sure to consider/follow the general guideline of vertical or +-0.5 slope lines during your construction of rigid forms such as buildings, vehicles, and other hard surface objects. for organic forms like people or trees, simply decide how many iso tiles they "stand" in (1x1, 1x2, 2x2, etc.), place their feet or whatever connects them to the ground strictly within that defined grid space, and then build them up to be the height that you'd like. The height of (organic) objects does not necessarily have to adhere to the iso grid, but you may want to consider defining a sub-grid that applies only to height so that you can define each object as being x units tall for a consistent feel, if that's something you're after 3a.) after completing your artwork, if you are comfortable with the asset just being one big image, feel free to stop here or to cut the whole thing into iso tiles to reuse for other artwork (works best if you strictly respect the grid) 3b.) if you want individual objects to be animated or move, I'd omit them from the big background, create them separately, and follow step 3a instead. otherwise just make sure to create each new object on a separate document layer to make it very easy to isolate them and export them as a transparent .png or what have you

  • Textures like the side of the brick building in the first screenshot you shared can be achieved by taking some image of bricks, potentially even an orthographic photograph you take out in the world (wide web), scaling them down to fit the game resolution, then skewing them with an image transform operation until they adhere to the 0.5 or -0.5 slope guideline.
  • If you want to duplicate the style of their UI: you could make the buttons at a higher resolution in a 2D art program, scale them down to game resolution (consider using the Nearest Neighbour resampling algorithm for a more pixel-arty look and feel), and then optionally perform a final pixel art pass on top to make sure they look the way you want them to.
  • To duplicate the general aesthetic: a LOT of the art from these screenshots you've shared gives me the vibe that they were made at a much higher resolution in an external program, scaled down to game art resolution, and then polished with a final pixel art pass.

You are right in feeling it doesn't look like 'handcrafted' pixel art! Hopefully this process will give you the results you need. If you'd like an example of how something made with this process would look in a game screen mockup, let me know in the comments! I can whip something up for you to help completely answer your question.


The following P.S. content is not relevant to the immediate answer of the question. All of that can be found above. I'm new to Stack Exchange, let me know if the post-scriptums should be removed completely. I'd like to be civil and avoid getting bombed by thumbs downs and/or administrative action if possible. thx <3


POST SCRIPTUM

You state you're new to art, which is totally cool! My answer involves knowledge of external programs such as Adobe Photoshop or Autodesk Maya. If those/their alternatives are too intimidating for you to use on this project that is rather immediately happening (or is it in pre-dev?), I'd consider looking into other ways to achieve a similar effect, perhaps even just making hand made pixel art that emulates this style!


\$\endgroup\$
  • \$\begingroup\$ I haven't had much time to work on this project lately but thank you for you detailed answer, I really appreciate that you took the time to write all that and I learned a lot from it ! Thank you again ! :) \$\endgroup\$ – Malemort yesterday

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.