Graphics 2.5d Black Outline For Basic 3d Shapes

Discussion in 'Tutorials' started by modler2, Jun 21, 2016.

  1. modler2

    modler2 Member

    Joined:
    Jun 21, 2016
    Posts:
    18
    GM Version: Studio 1.4
    Target Platform: Tested on Android and Windows

    Summary:
    This is my first tutorial I hope you guys like it! I thought this might a cool effect to add to 3d projects or in my case a 2.5d project. Keep in mind I'm no expert so this code is probably inefficient. It is simply drawing a second duplicate model .5 bigger on the x,y,z axis, applying a black texture to it and then enabling culling on the block. Its a very basic application that can add a cool effect to your games. Keep in mind however this is doubling the poly count and on large scale can cause slowdowns. It also is known to cause bigger and or smaller lines depending on the position of your player.

    The effect can make your flat game go from this:
    [​IMG]

    to this:
    [​IMG]


    I'm not going to explain about the player because its your game your player will likely interact different than mine. I also am assuming that you have an understanding of applying textures to 3d models. However I will explain the camera and the block code required to achieve this effect.

    Start by making an object and calling it "Camera"

    Within Camera create a room start event and copy this code into a script
    Code:
    d3d_start(); //this starts the 3d in the room
    //fixes alpha issue within gamemaker studio
    draw_set_alpha_test(true)
    draw_set_alpha_test_ref_value(40)
    Still within Camera create a room end event and place this code into a script
    Code:
    d3d_end(); //avoids memory leaks when closing the game
    Finally create a draw event for the camera and place this last line of code in it
    char is just the name of my player for my game just change thta name to what ever name your player object is called
    Code:
    d3d_set_projection(char.x,char.y-6.9,350,char.x,char.y-7.2,190,0,0,1)
    Now create and object and call it "Wall"

    in the create event for your Wall object place this code into a script
    Code:
    //======================================================
    //this fixes the black texture issue in gamemaker studio
    //======================================================
    draw_set_color(c_white) //required to draw the texture otherwise the box will be black
    
    //======================================================
    /textures for block
    //======================================================
    wall_texture = sprite_get_texture(wall_tex,0);
    grass_texture = sprite_get_texture(spr_grass,0);
    black_texture = sprite_get_texture(spr_black,0);
    
    //======================================================
    //this fixes the 3d opacity issue in gamemaker studio
    //======================================================
    draw_set_alpha_test(true)
    draw_set_alpha_test_ref_value(40)
    Lastly create a Draw event in your Wall object and place this code into a script
    Code:
    if (point_distance(x,y,char.x,char.y)>230) exit; //if outside screen do not draw
    else
    {
        d3d_set_culling(false);
        //draw the block
        d3d_draw_block(x,y,32,x+32,y+32,-32,wall_texture,1,1);
        //draw the grass above it
        d3d_draw_block(x,y-1,32,x+32,y+1,-32,grass_texture,1,1);
    
        //=========================================
        //draw black outline
        //=========================================
        d3d_set_culling(true);
        d3d_draw_block(x-1,y-1.5,33.5,x+32.5,y+32.5,-32.5,black_texture,1,1);
    }
     
    Last edited: Jun 21, 2016
    DirtyBlasion and Aura like this.
  2. chance

    chance predictably random Forum Staff Moderator

    Joined:
    Apr 22, 2016
    Posts:
    789
    This is an interesting combination of 2D line drawings overlaid on 3D primitives. Not really sure what the application might be, so maybe you could say more about this. Either way, I suspect some members may have use for it.

    Also, I'm curious why you put the 3D primitive drawing inside the d3d_transform_set_identity() block. You aren't performing any transformations, so those aren't necessary. I believe you can toggle the d3d_set_culling() without them.
     
  3. modler2

    modler2 Member

    Joined:
    Jun 21, 2016
    Posts:
    18
    Totally forgot to remove that from the code, im pulling the code from my wip game thats why. Thanks for the heads up! Also adding this outline if you wanted to you could easily applied a cell shaded baked texture to fake outline+cell shading without the use of a shader.

    Its a poor example but this is an old project of mine where i tried to fake it using this:
    [​IMG]
     
    Last edited: Jun 21, 2016
    zingot and krezix like this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice