【问题标题】:How do you add an image to a text button in Libgdx without using texturepacker?如何在不使用纹理打包器的情况下将图像添加到 Libgdx 中的文本按钮?
【发布时间】:2014-12-07 09:48:24
【问题描述】:

您好,我正在使用 libgdx 开发 Android 游戏。我使用默认的 uiskin atlas 和 json 文件创建了我的主菜单按钮。问题是我不完全了解如何将按钮图像从它们当前的默认灰色更改。例如,我为退出按钮创建了退出图像,但如何将该图像添加到主菜单中的退出按钮?我已经从我的主精灵表中创建了退出图像的纹理区域,但找不到任何可以让我将其附加到按钮的东西。谢谢

到目前为止,这是我拥有的代码

Skin skin = new Skin(Gdx.files.internal("data/ui/uiskin.json"));

exit = new TextButton("Exit",skin);
            exit.setPosition(0,0);
            exit.setSize(60, 60);

              stage.addActor(exit);
              exit.addListener(new ClickListener() {
                  @Override
                  public void clicked(InputEvent event, float x, float y) {
                      System.exit(0);
                  }
              });

【问题讨论】:

    标签: libgdx


    【解决方案1】:

    我建议深入研究一下皮肤、纹理和 Scene2d。请参考 StackOverflow 中的 other questionthis one,它们提供了关于皮肤是什么以及如何使用它的一些描述。

    皮肤包含您可以使用的所有可绘制对象以及字体和其他内容的定义。如果您想在不使用 Texture Packer 的情况下修改皮肤,您只需修改图像文件,然后更改指定区域的 JSON。使用 Texture Packer 可以为您带来以下优势:

    1. 将每个区域的单个图像放在单独的文件中
    2. 使用适当的位置和大小信息自动创建 JSON 文件
    3. 通过旋转图像和各种算法以减少未使用的空间,有效地将图像存储为 PNG 图像

    更多介绍请见:hereLibgdx wiki 或此quick tutorial

    在默认皮肤的情况下,它被称为:uiskin.json 并且“指向”一个 TexturePack 图像 uiskin.png。当你打开 png 文件时,你会发现 json 文件中定义的所有区域。

    【讨论】:

    • 非常感谢。昨晚我再次查看并意识到我几乎必须创建自己的皮肤。一开始看起来很复杂,但是 atlas 文件几乎从 png 中获取图像位置,而 json 文件就像 css 样式一样。
    • 您也可以从空文件开始,然后随手添加部分。此链接还包含有关皮肤 JSON 格式的一些信息:gamefromscratch.com/post/2013/12/18/…
    【解决方案2】:

    SimpleButton.kt

    class SimpleButton(texture: Texture?, text: String?, x: Float, y: Float, width: Float, height: Float) {
    
        var texture : Texture? = null
    
        private var font : BitmapFont? = null
        private var shadowFont : BitmapFont? = null
    
        private var x : Float = 0f
        var y : Float = 0f
        private var width : Float = 0f
        private var height : Float = 0f
        var text : String? = null
        private var fontSize : Int = 120
        var fontColor : Color = Color.WHITE
    
        private var fontName : String = "pricedown.otf"
    
        private val shadowLabelGlyph = GlyphLayout()
        private val labelGlyph = GlyphLayout()
    
        fun checkIfClicked(ix: Float, iy: Float) {
    
            if ((ix > (x - (width / 2f))) && (ix < (x + (width / 2f)))) {
    
                if ((iy > (y - (height / 2f))) && (iy < (y + (height / 2f)))) {
    
                    // the button was clicked, perform an action
    
                    println("Button clicked !")
    
                    this.listener?.invoke()
    
                }
    
            }
    
        }
    
        init {
    
            println("-------------------")
            println("SimpleButton")
            println("-------------------")
    
            println("texture: ${texture}")
    
            this.texture = texture // your image
            setPosition(x, y)
            setSize(width, height)
    
            if (text != null) {
    
                this.text = text
    
                // font generator
    
                val generator = FreeTypeFontGenerator(Gdx.files.internal(fontName))
    
                // parameter
    
                val parameter: FreeTypeFontGenerator.FreeTypeFontParameter =
                    FreeTypeFontGenerator.FreeTypeFontParameter()
                parameter.size = fontSize // font size
    
                font = generator.generateFont(parameter)
    
                shadowFont = generator.generateFont(parameter)
    
            }
    
        }
    
        fun draw(batch: SpriteBatch){
    
            if (this.texture != null) {
    
                batch.draw(
                    this.texture,
                    this.x - (this.width / 2f),
                    this.y - (this.height / 2f),
                    this.width,
                    this.height
                )
    
            }
    
            if (this.font != null) {
    
                // fontColor
    
                font?.color = fontColor
    
                shadowFont?.color = Color.BLACK
    
                // shadowLabelGlyph
    
                shadowLabelGlyph.setText(shadowFont, text)
    
                // labelGlyphWidth
    
                val shadowLabelGlyphWidth: Float = shadowLabelGlyph.width
                val shadowLabelGlyphHeight: Float = shadowLabelGlyph.height
    
                // draw shadowFont
    
                shadowFont!!.draw(
                    batch,
                    shadowLabelGlyph,
                    this.x - (shadowLabelGlyphWidth / 2f) + 2f,
                    this.y + (shadowLabelGlyphHeight / 2f) - 2f
                )
    
                // labelGlyph
    
                labelGlyph.setText(font, text)
    
                // labelGlyphWidth
    
                val labelGlyphWidth: Float = labelGlyph.width
                val labelGlyphHeight: Float = labelGlyph.height
    
                // draw font
    
                font!!.draw(
                    batch,
                    labelGlyph,
                    this.x - (labelGlyphWidth / 2f),
                    this.y + (labelGlyphHeight / 2f)
                )
    
            }
        }
    
        private var listener: (() -> Unit)? = null
    
        fun setListener(listener: () -> Unit) {
            this.listener = listener
        }
    
        fun setPosition(x: Float, y: Float) {
    
            this.x = x
            this.y = y
    
        }
    
        fun setSize(width: Float, height: Float) {
    
            this.width = width
            this.height = height
    
        }
    
        fun setFontName(fontName: String) {
    
            this.fontName = fontName
    
            // font generator
    
            val generator = FreeTypeFontGenerator(Gdx.files.internal(fontName))
    
            // parameter
    
            val parameter: FreeTypeFontGenerator.FreeTypeFontParameter =
                FreeTypeFontGenerator.FreeTypeFontParameter()
            parameter.size = fontSize // font size
    
            font = generator.generateFont(parameter)
    
            shadowFont = generator.generateFont(parameter)
    
        }
    
        fun setFontSize(fontSize: Int) {
    
            this.fontSize = fontSize
    
            // font generator
    
            val generator = FreeTypeFontGenerator(Gdx.files.internal(fontName))
    
            // parameter
    
            val parameter: FreeTypeFontGenerator.FreeTypeFontParameter =
                FreeTypeFontGenerator.FreeTypeFontParameter()
            parameter.size = fontSize // font size
    
            font = generator.generateFont(parameter)
    
            shadowFont = generator.generateFont(parameter)
    
        }
    
    }
    

    Game.kt

    class Game() : ApplicationAdapter() {
    
        // MARK: - Properties -
    
        var camera : OrthographicCamera? = null
        var viewport : ExtendViewport? = null
    
        private lateinit var batch : SpriteBatch
        var touchPoint : Vector3 = Vector3(0f, 0f, 0f)
        var replayButton : SimpleButton? = null
    
        // MARK: - Lifecycle -
    
        override fun create() {
    
            // camera
    
            camera = OrthographicCamera()
            viewport = ExtendViewport(1080f, 1920f, camera)
    
            // game variables
    
            batch = SpriteBatch()
    
            // replayButton
    
            replayButton = SimpleButton(Texture("button_green.png"), "Replay", 0f, 0f, 400f, 200f)
            replayButton?.setFontSize(80)
            replayButton?.fontColor = Color.BLUE
            replayButton?.setFontName("ka1.ttf")
    
            replayButton?.setListener {
    
                println("Button Pressed")
    
            }
    
        }
    
        // MARK: - Render Loop -
    
        override fun render() {
    
            // camera
    
            camera?.update(); //update our camera every frame
    
            // draw
    
            batch.begin()
    
            // replayButton
    
            replayButton!!.setPosition((camera!!.viewportWidth / 2f), (camera!!.viewportHeight / 2f))
    
            replayButton!!.draw(batch)
    
            // touches
    
            if (Gdx.input.justTouched()) {
    
                camera!!.unproject(touchPoint!!.set(Gdx.input.x.toFloat(), Gdx.input.y.toFloat(), 0f))
    
                replayButton!!.checkIfClicked(touchPoint!!.x, touchPoint!!.y)
    
            }
    
            // end draw
    
            batch.end()
    
        }
    
    
        // MARK: - Camera -
    
        override fun resize(width: Int, height: Int) {
    
            // aspect fill
    
            viewport!!.update(width, height, true)
    
            batch.projectionMatrix = camera!!.combined
    
        }
    
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-01
      • 2014-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多