How do you use NineSlice on something other than gridview?

SDK Get Help
1

I've looked over the documentation, and although it gives an example, it gives one for gridview. Is there another way to use it?

Can I use it on things like sprites? Could I use it on things I draw with gfx?

For example, this screenshot:

  • The rounded corners is just a sprite with an image.
  • The border around the buttons is the same thing.
  • The buttons are just a gfx.drawroundedrectangle
    image
    image852×526 3.72 KB

I'd like to replace those large backgrounds with nineslices, but I'm having trouble getting it to work with anything other than a gridview :frowning:

2

I can't give you a good example but it's like drawing an image.

Once you have an instance (by calling playdate.graphics.nineSlice.new(imagePath, innerX, innerY, innerWidth, innerHeight), you can draw it in the draw method of your sprites using yourNineSliceInstance:drawInRect(0, 0, yourSpriteWidth, yourSpriteHeight).

3

Thanks for the reply. Honestly I think I'm just going to give up on the whole nineslice thing. I think it's really cool, but it's not cool enough to put so much time into. I'm just going to create background image like I have with everything else.

4

Hello, here is a simple example:
I've created this simple image, 30x30 pixels:
nineslice
Download it and place it in an images folder or anywhere it fits you.

And this is a simple code example:

import "CoreLibs/graphics"
import "CoreLibs/nineslice"

local pd_nineslice <const> = playdate.graphics.nineSlice

-- import the nineslice image from images folder (or anywhere from your projects folder structure)
local nineslice <const> = pd_nineslice.new("images/nineslice", 10, 10, 10, 10)
local renderWidth <const>, renderHeight <const> = 10, 10
-- local renderWidth <const>, renderHeight <const> = 100, 100
-- local renderWidth <const>, renderHeight <const> = 200, 100

function playdate.update()
    nineslice:drawInRect(0, 0, renderWidth, renderHeight)
end

You can uncomment the commented renderWidth and renderHeight variables so you can see, how the nineslice is rendered based on these values. Based on these values, the image will be "stretched" to fit the given width and height.

If you'd like to use the nineslice with sprites, you can overload the sprite's draw method. Something like this:

import "CoreLibs/graphics"
import "CoreLibs/nineslice"

local pd <const> = playdate
local pd_graphics <const> = pd.graphics
local pd_sprite <const> = pd_graphics.sprite
local pd_nineslice <const> = pd_graphics.nineSlice

local nineslice <const> = pd_nineslice.new("images/nineslice", 10, 10, 10, 10)
local renderWidth <const>, renderHeight <const> = 200, 100

local sprite <const> = pd_sprite.new()
sprite:moveTo(0, 0)
sprite:setCenter(0, 0)
sprite:setSize(renderWidth, renderHeight)

function sprite:draw()
    nineslice:drawInRect(0, 0, self.width, self.height)
end

sprite:add()

function pd.update()
    pd_sprite.update()
end
2 Likes
5

After some fooling around with it I does work pretty well. Thank you.

An issue I had was my update was clearing the screen so the nineslice would never appear.

Before

import "CoreLibs/graphics"
import "CoreLibs/nineslice"

local pd_nineslice <const> = playdate.graphics.nineSlice

-- import the nineslice image from images folder (or anywhere from your projects folder structure)
local nineslice <const> = pd_nineslice.new(border1, 5, 5, 16, 16)
-- local renderWidth <const>, renderHeight <const> = 10, 10
local renderWidth <const>, renderHeight <const> = 100, 100
-- local renderWidth <const>, renderHeight <const> = 200, 100


function playdate.update()
	nineslice:drawInRect(0, 0, renderWidth, renderHeight)
	-- LocationFinderupdate()
	-- print(pd.getFPS())

	
	-- runGameManager()

	-- if MainStatus == StatusMain.Shop or
	-- 	MainStatus == StatusMain.ShopBuy or
	-- 	MainStatus == StatusMain.ShopBuyEquipment or
	-- 	MainStatus == StatusMain.ShopBuyTunups then
	-- 	--updateMoney()
	-- end

	-- selected = false
	-- allInputs()

	
	gfx.sprite.update()
	
	pd.timer.updateTimers()
end

image

After

import "CoreLibs/graphics"
import "CoreLibs/nineslice"

local pd_nineslice <const> = playdate.graphics.nineSlice

-- import the nineslice image from images folder (or anywhere from your projects folder structure)
local nineslice <const> = pd_nineslice.new(border1, 5, 5, 16, 16)
-- local renderWidth <const>, renderHeight <const> = 10, 10
local renderWidth <const>, renderHeight <const> = 100, 100
-- local renderWidth <const>, renderHeight <const> = 200, 100


function playdate.update()
	
	-- LocationFinderupdate()
	-- print(pd.getFPS())

	
	-- runGameManager()

	-- if MainStatus == StatusMain.Shop or
	-- 	MainStatus == StatusMain.ShopBuy or
	-- 	MainStatus == StatusMain.ShopBuyEquipment or
	-- 	MainStatus == StatusMain.ShopBuyTunups then
	-- 	--updateMoney()
	-- end

	-- selected = false
	-- allInputs()

	
	gfx.sprite.update()
	nineslice:drawInRect(0, 0, renderWidth, renderHeight)
	pd.timer.updateTimers()
end

image

3 Likes