Using Inkscape for game graphics

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

Using Inkscape for game graphics

Post by badidea »

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: 145
Joined: Dec 06, 2012 0:38

Re: Using Inkscape for game graphics

Post by c-sanchez »

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

Re: Using Inkscape for game graphics

Post by dodicat »

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: 2586
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Post by badidea »

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: 7976
Joined: Jan 10, 2006 20:30
Location: Scotland

Re: Using Inkscape for game graphics

Post by dodicat »

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
Moderator
Posts: 1730
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Post by paul doe »

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: 2586
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Post by badidea »

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
Moderator
Posts: 1730
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Post by paul doe »

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: 2586
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Post by badidea »

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

Re: Using Inkscape for game graphics

Post by paul doe »

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: 2586
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Post by badidea »

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
Moderator
Posts: 1730
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Using Inkscape for game graphics

Post by paul doe »

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: 2586
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Post by badidea »

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: 3906
Joined: Jan 01, 2009 7:03
Location: Australia

Re: Using Inkscape for game graphics

Post by BasicCoder2 »

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: 2586
Joined: May 24, 2007 22:10
Location: The Netherlands

Re: Using Inkscape for game graphics

Post by badidea »

Works quite well. Without any tweaking:
Image
Post Reply