1. 2D Art For Realtime
3D Web Game

2. Content:
This session will discuss the formation 2d art for real time 3d
web game.
• Character
• Environment
• Artwork for PR

3. Part 1: Character
 Character style
The characters were sketched in different styles

6. After a survey, this style was voted by gamers

7. concept 3d model
3d character was made based on a 3d concept It looks so cute

8. Character in fixed And wearing a hat
cam mode

9. Some animation samples. The animations are hard to see
and interactive from this camera angle

10. How do you improve these
problems?

11. Step 1:
• Adjust the hip higher
• Pull the arms and legs longer

12. These not enough adjustments because the result are
still not better from this camera angle.
original fixed

13. Adjust the ratio of body and head a second time
Increase the scale of the arm and leg, then decrease the scale of
the head. This way the character is more balance and attractive

14. Old 3d character New 3d character
New 3d character in perspective viewpoint

15. Step 2: Adjust the camera angle and make the camera move in
a flowing path.

16. With a new angle and movement of camera, we can
observe costumes and funny animations easily

17.  Costume:
The costumes, which are made separately, are really nice. For
example: shirt, pants, glovers, hat. But when they were
combined together, the result wasn’t good.
Solution:
• Full set
• Topic

18. Fullset sketches

19. Occupation sketches

20. Part 2: Environment

21. Because of limited art resources, when a 3d scene is created
from 2d sketch, these contours can’t be drawn, so the result
between 2d and 3d is not the same.

22. For solving this problem, just cleanup these contour, so
that the final result is similar.

23. A concept artist, who usually makes mistakes, wants to show
the density of the objects to look like real life.

24. A large amount of polygons are showed in a small area , so
this way is not good for game performance

25. A tip for optimizing art resources
• 2d and 3d artists use a common texture library
Example : using common texture library

26. Part 3: Art work for PR
 2D Sketch

27.  Character’s pose in 3d

28.  Retouch and add more details

29.  Final step, Combine all characters together, and add the
background and effects.

30. • This method is really effectine, when an artwork is drawn
by many artists at the same time.
• 2d artists want the characters of artwork and in-game to
be the same.

31. Some artwork were made using the same method.

32. Conclusion:
• Defining the camera’s angle and active range is the most
important thing for the next steps.
• Avoid drawing many details in a small area.
• 2d and 3d artists should use a common texture library .
• Combine 2d and 3d for drawing an art work.