It is difficult to create s Slider widget with an image sheet

Audio and Graphics
#1

My goal here is to create a slider widget using an image sheet (sprite sheet). Using a image sheet is key.

Before you continue reading, I would like to mention that I’ve visited the Slider Widget Documentation enough times that I’ve practically memorized it. Yet somehow, I still can’t get my slider widget to look half-decent, so here I am…

I believe I am doing everything correctly, but clearly I’m not since slider widget looks more like a plane crash than anything else…

If someone can point out what I’m doing wrong, and possible post the correct code, I would appreciate it immensely.

Thank you in advance.

::Below is my code::

config.lua

application = { content = { width = 320, height = 568, scale = "zoomEven", xAlign = "center", yAlign = "center", }, }

main.lua

local composer = require("composer") composer.gotoScene("slider")

slider.lua

local composer = require("composer") local widget = require("widget") local scene = composer.newScene() local viewGroup local w, h = display.contentWidth, display.contentHeight local sliderSheet = graphics.newImageSheet("slidersheet.png", { frames = { { -- Left x = 618, y = 1, width = 256, height = 128, }, { -- Center x = 1, y = 1, width = 256, height = 128, }, { -- Right x = 878, y = 1, width = 256, height = 128, }, { -- Fill x = 258, y = 1, width = 256, height = 128, }, { -- Handle x = 514, y = 1, width = 102, height = 102, }, }, sheetContentWidth = 470, sheetContentHeight = 314, }) function scene:create(event) viewGroup = self.view local background = display.newRect(w/2, h/2, w, h) local mySlider = widget.newSlider { left = 0, top = 240, value = 0, sheet = sliderSheet, leftFrame = 1, middleFrame = 2, rightFrame = 3, fillFrame = 4, frameWidth = 256, frameHeight = 128, handleFrame = 5, handleWidth = 40, handleHeight = 40, } mySlider.width = 300 mySlider.height = 50 end scene:addEventListener("create", scene) return scene
#2

Hi @kc.thomas304,

Something appears to be definitely wrong in your image sheet setup, because the frames that are being used seem to pulling/including visual content from some neighboring frame or something… for example, what are the two dark black lines/bars to the left and right of the other pieces in your screenshot? I don’t where on the image sheet that visual content would be coming from.

You also seem to have your image sheet content values wrong. If you have four frames for the slider (left, center, right, fill) and those are 256 px wide, those add to 1024, but you set “sheetContentWidth” to 470… not to mention the handle which adds another 102. Then the height is also wrong, if the main slider pieces are 128 px high, but you set “sheetContentHeight” to 314.

Everything I see here points to a misconfigured image sheet. Start fixing that and see how it goes.

Brent

#3

@Brent Sorrentino

I don’t disagree with you. In fact, I am almost convinced this is the case.

That being said, I was hoping you could actually help me set up the image sheet with correct values :stuck_out_tongue: Is that asking too much?

As for the “sheetContentWith” (470) and “sheetContentHeight” (314), I got these values from Texture Packer, a third-party sprite sheet generation program.

Is it possible that these values are wrong because I am using the free version?

Thanks,

KC

#4

Texture Packer should be working just fine. Many many people use it with great success. That being said, it has a lot of configuration options which you may need to double check are correct, as one incorrect value might be causing the output into Corona to go wrong.

Brent

#5

Ok, fair enough.

#6

Hi @kc.thomas304,

Something appears to be definitely wrong in your image sheet setup, because the frames that are being used seem to pulling/including visual content from some neighboring frame or something… for example, what are the two dark black lines/bars to the left and right of the other pieces in your screenshot? I don’t where on the image sheet that visual content would be coming from.

You also seem to have your image sheet content values wrong. If you have four frames for the slider (left, center, right, fill) and those are 256 px wide, those add to 1024, but you set “sheetContentWidth” to 470… not to mention the handle which adds another 102. Then the height is also wrong, if the main slider pieces are 128 px high, but you set “sheetContentHeight” to 314.

Everything I see here points to a misconfigured image sheet. Start fixing that and see how it goes.

Brent

#7

@Brent Sorrentino

I don’t disagree with you. In fact, I am almost convinced this is the case.

That being said, I was hoping you could actually help me set up the image sheet with correct values :stuck_out_tongue: Is that asking too much?

As for the “sheetContentWith” (470) and “sheetContentHeight” (314), I got these values from Texture Packer, a third-party sprite sheet generation program.

Is it possible that these values are wrong because I am using the free version?

Thanks,

KC

#8

Texture Packer should be working just fine. Many many people use it with great success. That being said, it has a lot of configuration options which you may need to double check are correct, as one incorrect value might be causing the output into Corona to go wrong.

Brent

#9

Ok, fair enough.