Using Inkscape for game graphics

Game development specific discussions.
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Using Inkscape for game graphics

Postby badidea » Nov 12, 2019 23:58

Ok, this is probably the worst animation of a walking duck. But the images were made with Inkscape which I had used before until a few hours ago.

I first followed this tutorial which resulted in this turkey: turtle.svg (file name is a typo).
Then I made my own duck drawing(s): duck.svg (it is beautiful, isn't it?)
Both ducks converted to BMP (via PNG and GIMP) with transparency: duck1.bmp and duck2.bmp

And put some test code together:

Code: Select all

#include once "file.bi"

const as ulong C_DARK_GRAY = RGB(63, 63, 63)

type int2d
   as integer x, y
end type

'-------------------------------- Graphics.bi ----------------------------------

union rgba_union
   value as ulong
   type
      b as ubyte
      g as ubyte
      r as ubyte
      a as ubyte
   end type
end union

type bitmap_header field = 1
   bfType          as ushort
   bfsize          as ulong
   bfReserved1     as ushort
   bfReserved2     as ushort
   bfOffBits       as ulong
   biSize          as ulong
   biWidth         as ulong
   biHeight        as ulong
   biPlanes        as ushort
   biBitCount      as ushort
   biCompression   as ulong
   biSizeImage     as ulong
   biXPelsPerMeter as ulong
   biYPelsPerMeter as ulong
   biClrUsed       as ulong
   biClrImportant  as ulong
end type

enum image_draw_mode
   IDM_PSET
   IDM_TRANS
   IDM_ALPHA
end enum

enum image_horz_align
   IHA_LEFT
   IHA_CENTER
   IHA_RIGHT
end enum

enum image_vert_align
   IVA_TOP
   IVA_CENTER
   IVA_BOTTOM
end enum

type image_type
   dim as any ptr pFbImg
   dim as int2d size, half
   dim as integer hAlign, vAlign, drawMode
   declare sub create(sizeInit as int2d, colorInit as ulong)
   declare function createFromBmp(fileName as string) as integer
   declare sub setProp(hAlign as integer, hAlign as integer, drawMode as integer)
   declare sub drawxy(x as integer, y as integer)
   declare sub destroy()
   declare destructor()
end type

sub image_type.create(sizeInit as int2d, colorInit as ulong)
   pFbImg = imagecreate(sizeInit.x, sizeInit.y, colorInit)
   size = sizeInit
   half.x = size.x \ 2
   half.y = size.y \ 2
   setProp(IHA_LEFT, IVA_TOP, IDM_PSET)
end sub

function image_type.createFromBmp(fileName as string) as integer
   dim as bitmap_header bmp_header
   dim as int2d bmpSize
   if fileExists(filename) then
      open fileName for binary as #1
         get #1, , bmp_header
      close #1
      bmpSize.x = bmp_header.biWidth
      bmpSize.y = bmp_header.biHeight
      create(bmpSize, &hff000000)
      bload fileName, pFbImg
      'print "Bitmap loaded: " & filename
      return 0
   end if
   'print "File not found: " & filename
   return -1
end function

sub image_type.setProp(hAlign as integer, vAlign as integer, drawMode as integer)
   this.hAlign = hAlign
   this.vAlign = vAlign
   this.drawMode = drawMode
end sub

sub image_type.drawxy(x as integer, y as integer)
   select case hAlign
      case IHA_CENTER : x -= half.x
      case IHA_RIGHT : x -= size.x
   end select
   select case vAlign
      case IVA_CENTER : y -= half.y
      case IVA_BOTTOM : y -= size.y
   end select
   select case drawMode
      case IDM_PSET : put (x , y), pFbImg, pset
      case IDM_TRANS : put (x , y), pFbImg, trans
      case IDM_ALPHA : put (x , y), pFbImg, alpha ', alphaval
   end select
end sub

sub image_type.destroy()
   if (pFbImg <> 0) then
      imagedestroy(pFbImg)
      pFbImg = 0
   end if
end sub

destructor image_type()
   destroy()
end destructor

'---------------------------------- Main ---------------------------------------

const NUM_DUCK_IMG = 2
dim as image_type duck(NUM_DUCK_IMG - 1)

dim as string fileName

screenres 800, 600, 32

fileName = "duck1.bmp"
if duck(0).createFromBmp(fileName) <> 0 then
   print "Error: '" & fileName & "' not found!"
   sleep
   end -1
end if
duck(0).setProp(IHA_LEFT, IVA_TOP, IDM_ALPHA)

fileName = "duck2.bmp"
if duck(1).createFromBmp(fileName) <> 0 then
   print "Error: '" & fileName & "' not found!"
   sleep
   end -1
end if
duck(1).setProp(IHA_LEFT, IVA_TOP, IDM_ALPHA)

dim as integer iDuckImg = 0
while inkey <> chr(27)
   line(0, 0)-(799, 599), C_DARK_GRAY, bf
   'put (350, 250), duck(iDuckImg).pFbImg, alpha
   duck(iDuckImg).drawxy(350, 250)
   iDuckImg += 1
   if iDuckImg >= NUM_DUCK_IMG then iDuckImg = 0
   sleep 300
wend

sleep

Clearly 2 images are not enough for an animation, but making the images in Inkscape is way more fun then manipulating individual pixels. I can move the legs around to create more frames.

If only there was a library to read and render SVG directly in freeBASIC ;-)
c-sanchez
Posts: 118
Joined: Dec 06, 2012 0:38

Re: Using Inkscape for game graphics

Postby c-sanchez » Nov 13, 2019 4:50

I wonder if possible to have BGRABitmap in FreeBASIC :P
dodicat
Posts: 6030
Joined: Jan 10, 2006 20:30
Location: Scotland

Re: Using Inkscape for game graphics

Postby dodicat » Nov 13, 2019 16:39

c-sanchez
Some bitmap bits and pieces.
This works on win 10

Code: Select all

 

#include "windows.bi"
#include "file.bi"
Const w = 800
Const _h = 600

#INCLUDE "fbgfx.bi"
#INCLUDE ONCE "windows.bi"


Function Set_Clipboard(bitmap As String) As HBITMAP
    Dim hBmp As HANDLE
    hBmp = LoadImage(0, bitmap, IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE)
    OpenClipboard(0)
    EmptyClipboard()
    SetClipboardData(CF_BITMAP, CopyImage(hBmp, IMAGE_BITMAP, 0, 0, LR_COPYRETURNORG))
    CloseClipboard()
    Return NULL
End Function

Function Get_Clipboard() As HBITMAP
    Dim hBmp As HANDLE
    If IsClipboardFormatAvailable(CF_BITMAP) = 0 Then
        Return NULL
        end if
        If OpenClipboard(0) = 0 Then
            Return NULL
            end if
            Function = GetClipboardData(CF_BITMAP)
            CloseClipboard()
        End Function
       
 sub get_bitmap_size(bmp As String,byref hght as long,byref wdth as long)  'fetch bitmap width/height
    Open bmp For Binary As #1
    Get #1, 19, wdth
    Get #1, 23, hght
    Close #1
End sub
 'demo
Sub drawbitmaptoimage(path As String,x as long=0,y as long=0)
    If Fileexists(path) Then
        Set_Clipboard(path)
        windowtitle path
    Else
        Print path;" not found"
        Sleep
        End
    End If   
    Dim As BITMAPINFO BitmapInfo
    Dim As HDC display_dc      = GetDC( NULL )
    Dim As HDC bitmap_dc       = CreateCompatibleDC( display_dc )
    Dim As HBITMAP bitmap      = CreateCompatibleBitmap( display_dc, w, _h )
    Dim As HGDIOBJ null_bitmap = SelectObject( bitmap_dc, bitmap )
    bitmap = Get_Clipboard()
    dim as long localW,localH
    get_Bitmap_Size(path,localW,localH)
    Dim As fb.image Ptr LocalImage = Imagecreate( localW, localH)
    LocalImage->pitch = LocalImage->Width * 4
    With BitmapInfo.bmiHeader
        .biSize     = Sizeof(BITMAPINFOHEADER)
        .biWidth    = localW
        .biHeight   = -localH
        .biPlanes   = 1
        .biBitCount = 32
    End With
    getdibits( bitmap_dc, bitmap, 0, localH, LocalImage + 1, @BitmapInfo, DIB_RGB_COLORS )
    SelectObject( bitmap_dc, null_bitmap )
    DeleteDC( display_dc )
    DeleteDC( bitmap_dc )
    DeleteObject( bitmap )
    Put(x, y), LocalImage,trans
End Sub


Screenres w, _h, 32,,64
color ,rgb(200,200,200)
cls

'create a silly bitmap

dim as any ptr i=imagecreate(500,500)
for n as long=1 to 50
    circle i,(rnd*500,rnd*500),10+rnd*50,rgba(rnd*255,rnd*255,rnd*255,100+rnd*155),,,,f
next n
line i,(0,0)-(499,499),,b

bsave "circles.bmp",i
'=============

Dim As String path="Circles.bmp"  'OR YOUR PATH

drawbitmaptoimage(path,100,50)

Sleep
     
         


Or you could paste a bitmap to paint.
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Postby badidea » Nov 13, 2019 17:25

c-sanchez wrote:I wonder if possible to have BGRABitmap in FreeBASIC :P

I am not familiar with BGRABitmap, but it looks like Cairo (graphics)?

dodicat wrote:Some bitmap bits and pieces.
This works on win 10
...

I see an image with pretty rough circles. What does the 'windows' part do? Except copying it to clipboard?
dodicat
Posts: 6030
Joined: Jan 10, 2006 20:30
Location: Scotland

Re: Using Inkscape for game graphics

Postby dodicat » Nov 13, 2019 19:06

The windows stuff is to copy the image to clipboard by code.
Last edited by dodicat on Nov 17, 2019 16:52, edited 1 time in total.
paul doe
Posts: 984
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Postby paul doe » Nov 13, 2019 21:07

badidea wrote:...
If only there was a library to read and render SVG directly in freeBASIC ;-)

I'm currently working on one (uses Cairo; was developing it for the last FreeBasic Compo organized by Lachie), so you wishes might soon come true ;)

It's almost fully functional (filters are not implemented) and can render to any render target you care to implement (a Fb.Image buffer, a custom data structure, etc), but I held the release because of some problems I encountered with some files. Interestingly enough, said files aren't neither complicated nor use any exotic drawing commands/features. There is one *MF*, for example, that just uses line-to commands, and I can't get it to render right (even though the code can render far, far more complex SVGs). Oh well.
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Postby badidea » Nov 13, 2019 21:59

paul doe wrote:I'm currently working on one (uses Cairo; was developing it for the last FreeBasic Compo organized by Lachie), so you wishes might soon come true ;)

I know, the " ;-) " was especially for you. Just checking your progress :-)
paul doe
Posts: 984
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Postby paul doe » Nov 13, 2019 22:07

badidea wrote:I know, the " ;-) " was especially for you. Just checking your progress :-)

Haha fair enough. I'm almost done, just being busy with other projects ATM (I also posted another keyboard handler like the one you 'assimilated' ;) This one is way better and more efficient (if a bit more 'heavy'), and uses the same interface as the other so switching it should be a breeze. You might want to take a look at it.
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Postby badidea » Nov 14, 2019 23:45

How does my "miner" look like? I know, missing hand.
Image
Oh, that is big!
paul doe
Posts: 984
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Postby paul doe » Nov 16, 2019 21:52

badidea wrote:How does my "miner" look like? I know, missing hand.
...

Looks pretty nice. Care to share the SVG file, so I can test it with the renderer?
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Postby badidea » Nov 16, 2019 22:10

paul doe wrote:
badidea wrote:How does my "miner" look like? I know, missing hand.
...

Looks pretty nice. Care to share the SVG file, so I can test it with the renderer?

No problem, the image above is the SVG-file. If you do 'save image as ...' (Firefox) you get the SVG.
paul doe
Posts: 984
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Postby paul doe » Nov 16, 2019 22:54

badidea wrote:...
No problem, the image above is the SVG-file. If you do 'save image as ...' (Firefox) you get the SVG.

Oh XD

Very well, then. Let me sort out a few things and I'll release the SVG renderer so you can shake it a little ;)

Say, perhaps the tutorials from Chris Hildenbrad will come in handy if you're using Inkscape...
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Postby badidea » Nov 17, 2019 0:09

paul doe wrote:Say, perhaps the tutorials from Chris Hildenbrad will come in handy if you're using Inkscape...

Yes, I actually found this website earlier today.
But I also found a graphics set (pixel art) which might spare me doing a lot for design in Inkscape: https://opengameart.org/content/mining-pixel-game-asset
But not all images I had in mind are included and pixel art forces me to use the set size of the images. With vector graphics, I can change the size later.
BasicCoder2
Posts: 3405
Joined: Jan 01, 2009 7:03

Re: Using Inkscape for game graphics

Postby BasicCoder2 » Nov 17, 2019 6:28

badidea wrote:... pixel art forces me to use the set size of the images. With vector graphics, I can change the size later.

http://goinkscape.com/convert-pixel-art ... -graphics/
badidea
Posts: 1620
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Postby badidea » Nov 17, 2019 11:06

BasicCoder2 wrote:http://goinkscape.com/convert-pixel-art-into-vector-graphics/

Works quite well. Without any tweaking:
Image

Return to “Game Dev”

Who is online

Users browsing this forum: No registered users and 2 guests