Java-Gaming.org    
Featured games (91)
games approved by the League of Dukes
Games in Showcase (580)
games submitted by our members
Games in WIP (500)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  How to draw a 2D-bridge  (Read 5549 times)
0 Members and 1 Guest are viewing this topic.
Offline JFixby
« Posted 2012-11-27 14:03:39 »

Hi!

Today I’ll tell you how to draw a simple 2D bridge for a videogame.

Firstly you need to make a few simple sketches like these:



The main point of the sketches is to provide us a chance to think about the details of our bridge, like: fasteners, screws, couplings, fences, torches and so on. Such details attract a lot of attention of a human brain, so it gets bored when it can’t find them on your picture. We can effectively enrich our sketch with details from Google Image Search and then draw sections of out bridge:





Firstly we draw the left side, then copy it and flip to get the right side. Generally it is a bad idea to copy stuff, but in our example as long as we are doing a simple object (bridge) we can allow it. Second, we draw the middle section. Keep it symmetrical, because we plan to duplicate it for creating bridges of a different length.

In this example you don't really need the digital tablet. You can just use your mouse and the Shift-key. Press Shift to draw straight lines (dragging the mouse), or to connect two clicks with a straight line (there are people who don’t know about this feature).

Drawing each step we should save our intermediate results by making mini-backups. Later we can use them in case we mess up, or reuse it for other drawings. To make the mini back-up drag all your layers in the “folder”-button and then drag the folder in the “new layer”-button. Here is the duplicated stuff:



Now we should block original folder using the “black-lock” and make the folder invisible to protect it. Then we use the duplicate folders content to build a 4-sections instance of our bridge:



Don’t forget to mini-backup it too. Also you can save your drawing in a separate files when you work on something huge like the game level I was showing you last time. That level is a picture 14000 pixels wide, I saved every few hours in a separate file calling it something like public_demo_level_0047.psd and uploaded to DropBox.

Now coloring. We need 3 layers (I list them down- up):
3) White background
2) Lineart – with opacity 60%
1) and a layer (called “color”) in the “Multiply” mode.
Two lower layers we block (using black locks) and the “color”-layer we paint with any neutral color:



Press Ctrl+U, play some time with hue and saturation, then add some volume by drawing shadows:



Now you can play a bit using texture brushes:

http://jfix.by/wp-content/uploads/2012/11/final.jpg




That's it. Here we are.

Looks quite simple because we are drawing just a simple bridge, there is nothing special about it Smiley

(Here is the same tutorial but with bigger images: http://jfix.by/2012/11/24/how-to-2d-bridge/)




my dev log: http://jfix.by/
Offline Pickleninja

JGO Coder


Medals: 10
Projects: 1


I'm tired of working for someone else.


« Reply #1 - Posted 2012-11-27 14:19:15 »

That's awesome!

I was thinking about how to do bridges, thanks for the tutorial! Smiley


-Pickle

Offline masteryoom

JGO Coder


Medals: 5
Projects: 3


If you look closely, you might see it turning...


« Reply #2 - Posted 2012-11-29 10:07:58 »

What are you using?

Smiley
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline JFixby
« Reply #3 - Posted 2012-11-29 17:15:18 »

You can use Photoshop and Gimp for this

my dev log: http://jfix.by/
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

xsi3rr4x (47 views)
2014-04-16 05:08:23

BurntPizza (43 views)
2014-04-15 14:46:01

UprightPath (59 views)
2014-04-15 04:39:50

UprightPath (41 views)
2014-04-15 04:35:47

Porlus (57 views)
2014-04-15 02:48:38

tom_mai78101 (80 views)
2014-04-10 15:04:31

BurntPizza (139 views)
2014-04-09 10:06:04

tom_mai78101 (239 views)
2014-04-06 00:34:39

trollwarrior1 (199 views)
2014-04-04 23:06:45

CJLetsGame (207 views)
2014-04-01 13:16:10
List of Learning Resources
by SHC
2014-04-18 14:17:39

List of Learning Resources
by Longarmx
2014-04-08 14:14:44

Good Examples
by matheus23
2014-04-06 00:51:37

Good Examples
by Grunnt
2014-04-04 02:48:46

Good Examples
by Grunnt
2014-04-04 02:48:37

Good Examples
by matheus23
2014-04-02 05:40:51

Good Examples
by matheus23
2014-04-02 05:40:34

Anonymous/Local/Inner class gotchas
by Roquen
2014-03-12 02:22:30
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!