Jump to content
  • Advertisement
Sign in to follow this  
  • entries
    3
  • comments
    0
  • views
    920

How to learn to draw game graphics

flatingo

1837 views

So, drawing. How to learn how to draw game graphics and how to learn to draw at all, when is your maximum this?

 

83150253.jpg

 

 

Okay, then let's discuss this. To begin with, I'm not a cool artist, but I persistently develop this skill in myself, every day drawing and stacking tons of paper. By the way, I advise this to you. This is good advice. As in the beginning of any business that you start, you do not need to show yourself a super genius, have super equipment and immediately invest huge amounts of money in your development. No, my dear friend, start small, and everything else will come with time.

Therefore, to begin with, choose the style of drawing that you want and just practice in it. Just do not paint in all styles at once. To begin with, determine what you like and understand what styles there is. Watching how the games and their style develop, I can say with confidence that now the pixel art, cartoonish and comic graphics are in fashion. Who needs hyperrealistic humanoids and canons now? This is a huge zamorochki in creating games and stereotyped. Do not be afraid to draw a fist bigger than your head, and legs are the size of a joystick.

 

13438789.png

 

 

Fashion, where beautifully painted drawings and brought them to realism, gradually disappears. Minimalism, simplicity and violation of proportions is what is now actual. Look at the latest games, because they became easier in style and no less beautiful (Overwatch, Dota2, Pixel Piracy, etc.). I will also say that I am a big fan of vector graphics and how it looks. What not to say about China and the eastern countries that can not live without it. This is not a joke, because in fact, Chinese developers are styling their games for a bright cartoon graphics with the addition of anime. In the east
This is popular.

 

Here are the games of Klei Entertainment. Pay attention to the style. You see? He's alone in all games and it's cool. This is the most important thing - to find your own style. I'm sure the director will not fire this artist.

 

81869307.jpg90019352.jpg

 

 

Look at other industries: advertising, television, etc. Everywhere simple graphics are used, for it is easy to perceive. People are now very lazy and quickly get used to everything, so vector graphics are now gaining good growth. By the way, to draw graphics for games, you need and do not need a graphics tablet. Look, the point is that you can draw a vector and pixels with your mouse. Believe me, this will be enough for you. But the tablet is relevant when you are drawing something more or less detailed. More often it is used for detailing and texturing an object in Photoshop. I once read Christopher Hart's book about drawing comics. You can also read the book of your chosen style, as well as redraw the different pictures you like. Why? Over time, the hand and the brain will memorize the outline and images, and it will be easier for you to come up with something new in the future, as well as draw already existing pictures in your head.

 

Well, I probably will finish this, but this is not my last article. I will be happy if you need my experience. By the way, more information about the development of games and everything related to it you can find out on my YouTube channel. With you was a Ukrainian developer of indie games - Flatingo. Good luck to you.

 


0 Comments


Recommended Comments

There are no comments to display.

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
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By blesseddisciple
      So I have a decent amount of JavaScript experience now and decided I was gonna lower my head and start cranking out some 2d games, partly to learn, partly to have fun. Afterall, HTML5 canvas is such an easy and enticing medium. I love the JavaScript implementation of it. But after literally struggling for a week to get basic game functionality working I have had enough of the little stupid bugs that pop up with JavaScript. Don't get me wrong, I still love the language for scripting. I'm just not going to spend 20 mins coding and 5 hours debugging just because the language is crap.
      I've decided to return to my previous endeavor, Java. I like Java a lot and the only reason I haven't pursued more in the way of game development is just for the fact that Java is limited to mobile or PC apps that may never see the light of day unless it's hosted on some obscure Java game hosting website that is populated with 2,000 half developed games that no one will ever care about. BUT, still, I enjoy hand coding and I know C# but don't feel like using Visual studio and I really don't wanna hand code C# on the .Net or whatever. I use Visual Studio for business apps (ASP.NET) but I don't wanna build a game with it.
      So, does anyone have any points to share about why moving to Java for game development is not smart? Besides the whole, "Java is slow" thing. I mean things that might make it harder in JAva to make games vs. in other languages. Please share your thoughts. 
    • By babaliaris
      Hello!
      My texture problems just don't want to stop keep coming...
      After a lot of discussions here with you guys, I've learned a lot about textures and digital images and I fixed my bugs. But right now I'm making an animation system and this happened.
       
      Now if you see, the first animation (bomb) is ok. But the second and the third (which are arrows changing direction) are being render weird (They get the GL_REPEAT effect).
      In order to be sure, I only rendered (without using my animation system or anything else i created in my project, just using simple opengl rendering code) the textures that are causing this issue and this is the result (all these textures have exactly 115x93 resolution)

      I will attach all the images which I'm using.
      giphy-27 and giphy-28 are rendering just fine.
      All the others not.They give me an effect like GL_REPEAT which I use in my code. This is why I'm getting this result? But my texture coordinates are inside the range of -1 and 1 so why?
      My Texture Code:
      #include "Texture.h" #include "STB_IMAGE/stb_image.h" #include "GLCall.h" #include "EngineError.h" #include "Logger.h" Texture::Texture(std::string path, int unit) { //Try to load the image. unsigned char *data = stbi_load(path.c_str(), &m_width, &m_height, &m_channels, 0); //Image loaded successfully. if (data) { //Generate the texture and bind it. GLCall(glGenTextures(1, &m_id)); GLCall(glActiveTexture(GL_TEXTURE0 + unit)); GLCall(glBindTexture(GL_TEXTURE_2D, m_id)); //Not Transparent texture. if (m_channels == 3) { GLCall(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, m_width, m_height, 0, GL_RGB, GL_UNSIGNED_BYTE, data)); } //Transparent texture. else if (m_channels == 4) { GLCall(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_width, m_height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data)); } //This image is not supported. else { std::string err = "The Image: " + path; err += " , is using " + m_channels; err += " channels which are not supported."; throw VampEngine::EngineError(err); } //Texture Filters. GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT)); GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT)); GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST_MIPMAP_NEAREST)); GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR)); //Generate mipmaps. GLCall(glGenerateMipmap(GL_TEXTURE_2D)); } //Loading Failed. else throw VampEngine::EngineError("There was an error loading image \ (Myabe the image format is not supported): " + path); //Unbind the texture. GLCall(glBindTexture(GL_TEXTURE_2D, 0)); //Free the image data. stbi_image_free(data); } Texture::~Texture() { GLCall(glDeleteTextures(1, &m_id)); } void Texture::Bind(int unit) { GLCall(glActiveTexture(GL_TEXTURE0 + unit)); GLCall(glBindTexture(GL_TEXTURE_2D, m_id)); }  
      My Render Code:
      #include "Renderer.h" #include "glcall.h" #include "shader.h" Renderer::Renderer() { //Vertices. float vertices[] = { //Positions Texture Coordinates. 0.0f, 0.0f, 0.0f, 0.0f, //Left Bottom. 0.0f, 1.0f, 0.0f, 1.0f, //Left Top. 1.0f, 1.0f, 1.0f, 1.0f, //Right Top. 1.0f, 0.0f, 1.0f, 0.0f //Right Bottom. }; //Indices. unsigned int indices[] = { 0, 1, 2, //Left Up Triangle. 0, 3, 2 //Right Down Triangle. }; //Create and bind a Vertex Array. GLCall(glGenVertexArrays(1, &VAO)); GLCall(glBindVertexArray(VAO)); //Create and bind a Vertex Buffer. GLCall(glGenBuffers(1, &VBO)); GLCall(glBindBuffer(GL_ARRAY_BUFFER, VBO)); //Create and bind an Index Buffer. GLCall(glGenBuffers(1, &EBO)); GLCall(glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO)); //Transfer the data to the VBO and EBO. GLCall(glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW)); GLCall(glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW)); //Enable and create the attribute for both Positions and Texture Coordinates. GLCall(glEnableVertexAttribArray(0)); GLCall(glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, sizeof(float) * 4, (void *)0)); //Create the shader program. m_shader = new Shader("Shaders/sprite_vertex.glsl", "Shaders/sprite_fragment.glsl"); } Renderer::~Renderer() { //Clean Up. GLCall(glDeleteVertexArrays(1, &VAO)); GLCall(glDeleteBuffers(1, &VBO)); GLCall(glDeleteBuffers(1, &EBO)); delete m_shader; } void Renderer::RenderElements(glm::mat4 model) { //Create the projection matrix. glm::mat4 proj = glm::ortho(0.0f, 600.0f, 600.0f, 0.0f, -1.0f, 1.0f); //Set the texture unit to be used. m_shader->SetUniform1i("diffuse", 0); //Set the transformation matrices. m_shader->SetUniformMat4f("model", model); m_shader->SetUniformMat4f("proj", proj); //Draw Call. GLCall(glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, NULL)); }  
      Vertex Shader:
      #version 330 core layout(location = 0) in vec4 aData; uniform mat4 model; uniform mat4 proj; out vec2 TexCoord; void main() { gl_Position = proj * model * vec4(aData.xy, 0.0f, 1.0); TexCoord = aData.zw; }  
      Fragment Shader:
      #version 330 core out vec4 Color; in vec2 TexCoord; uniform sampler2D diffuse; void main() { Color = texture(diffuse, TexCoord); }  






    • By babaliaris
      Hello!
      For those who don't know me I have started a quite amount of threads about textures in opengl. I was encountering bugs like the texture was not appearing correctly (even that my code and shaders where fine) or I was getting access violation in memory when I was uploading a texture into the gpu. Mostly I thought that these might be AMD's bugs because when someone was running my code he was getting a nice result. Then someone told me "Some drivers implementations are more forgiven than others, so it might happen that your driver does not forgive that easily. This might be the reason that other can see the output you where expecting". I did not believe him and move on.
      Then Mr. @Hodgman gave me the light. He explained me somethings about images and what channels are (I had no clue) and with some research from my perspective I learned how digital images work in theory and what channels are. Then by also reading this article about image formats I also learned some more stuff.
      The question now is, if for example I want to upload a PNG to the gpu, am I 100% that I can use 4 channels? Or even that the image is a PNG it might not contain all 4 channels (rgba). So I need somehow to retrieve that information so my code below will be able to tell the driver how to read the data based on the channels.
      I'm asking this just to know how to properly write the code below (with capitals are the variables which I want you to tell me how to specify)
      stbi_set_flip_vertically_on_load(1); //Try to load the image. unsigned char *data = stbi_load(path.c_str(), &m_width, &m_height, &m_channels, HOW_MANY_CHANNELS_TO_USE); //Image loaded successfully. if (data) { //Generate the texture and bind it. GLCall(glGenTextures(1, &m_id)); GLCall(glActiveTexture(GL_TEXTURE0 + unit)); GLCall(glBindTexture(GL_TEXTURE_2D, m_id)); GLCall(glTexImage2D(GL_TEXTURE_2D, 0, WHAT_FORMAT_FOR_THE_TEXTURE, m_width, m_height, 0, WHAT_FORMAT_FOR_THE_DATA, GL_UNSIGNED_BYTE, data)); } So back to my question. If I'm loading a PNG, and tell stbi_load to use 4 channels and then into glTexImage2D,  WHAT_FORMAT_FOR_THE_DATA = RGBA will I be sure that the driver will properly read the data without getting an access violation?  
      I want to write a code that no matter the image file, it will always be able to read the data correctly and upload them to the GPU.
      Like 100% of the tutorials and guides about openGL out there (even one which I purchased from Udemy) where not explaining all these stuff and this is why I was experiencing all these bugs and got stuck for months!
       
      Also some documentation you might need to know about stbi_load to help me more:
      // Limitations: // - no 12-bit-per-channel JPEG // - no JPEGs with arithmetic coding // - GIF always returns *comp=4 // // Basic usage (see HDR discussion below for HDR usage): // int x,y,n; // unsigned char *data = stbi_load(filename, &x, &y, &n, 0); // // ... process data if not NULL ... // // ... x = width, y = height, n = # 8-bit components per pixel ... // // ... replace '0' with '1'..'4' to force that many components per pixel // // ... but 'n' will always be the number that it would have been if you said 0 // stbi_image_free(data)  
    • By babaliaris
      Hello!

      I was trying to load some textures and I was getting this access violation atioglxx.dll access violation
      stb image which i'm using to load the png file into the memory, was not reporting any errors.

      I found this on the internet explaining that it is a bug from AMD.
      I fixed that problem by changing the image file which i was using. The image that was causing this issue was generated by this online converter from gif to pngs.

      Does anyone know more about it?

      Thank you.
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!