Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Spritesheets, Texture Atlasses or Texture Packs usable — Gideros Forum

Spritesheets, Texture Atlasses or Texture Packs usable

DikkesnoekDikkesnoek Member
edited April 2012 in Game & application design
Hello,

One of the most powerfull features of Corona and RapaNui/MOAI is the way
you can simply create animations from Texture Packs (also known as Spritesheets
or Texture Atlasses). Is it already possible to use this on the same way in Gideros
like the other tools do? You can create great animations in just a few lines of code.
In Cocos2D this will also works great but is much more work and more complicated.
If so, is there any tutorial? For my game I really need this feature.

Regards,

M.J.

Likes: ckapucu

+1 -1 (+1 / -0 )Share on Facebook

Comments

  • @Dikkesnoek, have you seen the sample under graphics -> texturePacker ?
    In fact GiderosStudio also comes with GiderosTexturePacker an integrated app that allows to create textures. It also works with textures created using TexturePacker from Andreas L.

    Have a look at the code in that example.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • DikkesnoekDikkesnoek Member
    edited April 2012
    I will check it immediately, thanks. Do I need to check the Academy?
  • gorkemgorkem Maintainer
    @Dikkesnoek That particular example under Graphics3 would answer your question.

    Apart from your question, all documents under Academy are worth printing out, and reading around when you have time and silence.
  • I will check the documents. Can I find the Graphics3 demo in the Wiki or Academy?

    Regards,

    Marc
  • evsevs Member
    edited April 2012
    Hello,

    Graphics 3 is one of the pages of examples in the Gideros Studio IDE, where there is a Texture Pack example.

    HTH


    Cheers

    evs
    SS.png
    929 x 680 - 110K
    SS.png 109.9K
  • I've found it, in one word great!!!! Also the Gideros Texture packer, super.
    Thanks again,

    M.J.
  • Hello,

    I am still searching for the ultimate game designing tool.

    I tried to do some animation with Gideros and I must say that it is quiet complicated. You will need a separate sprite sheet (like in all the developer tools), a txt file containing the data and a separate Lua class file. Why not in a way like for example RapaNui/MOAI :

    --setting up a sequence
    function onEnd1()
    char:play("shorttolong")
    end

    function onEnd2()
    char:play("longtoshort")
    end

    --Animation of spritesheet images in sequences
    --createAnim(file, width, height, x, y, scale_x, scale_y)
    test = RNFactory.createAnim("spriteSheet.png", 240, 240, 140, 640 - 420, 0.5, 0.5)
    --newSequence(name,frameOrder,speed,repeatTimes,onStopFunction)
    test:newSequence("shorttolong", { 7, 6, 5, 4, 3, 2, 1 }, 1, 100, onEnd2)
    test:newSequence("longtoshort", { 1, 2, 3, 5, 5, 6, 7 }, 1, 100, onEnd1)
    test:play("shorttolong")

    Or in Corona even simpler:

    --A sprite sheet
    local data = require("spriteSheet").getSpriteSheetData();
    local test_sheet = sprite.newSpriteSheetFromData("spriteSheet.png", data)
    local spriteSet = sprite.newSpriteSet(test_sheet, 1, 7)
    sprite.add( spriteSet, "reus", 1, 7, 2000, 0 ) -- play 7 frames every 2000 ms

    local instance = sprite.newSprite(spriteSet)
    instance.x = 130
    instance.y = 520
    instance:prepare("test")
    instance:play()

    And Guideros:

    In main.lua:

    stage:addChild(AnimatedSprite.new())

    In test.lua

    AnimatedSprite = Core.class(Sprite)

    function AnimatedSprite:init()
    local pack = TexturePack.new("test.txt", test.png")

    self.anim =
    {
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_1_25g.png")),
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_2_25g.png")),
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_3_25g.png")),
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_4_25g.png")),
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_5_25g.png")),
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_6_25g.png")),
    Bitmap.new(pack:getTextureRegion("test_240px_Retina_7_25g.png")),
    }

    self.frame = 1
    self:addChild(self.anim[1])

    self.nframes = #self.anim -- WHAT DOES THIS MEAN?

    self.subframe = 0

    self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)

    self:setX(10)
    self:setY(400)
    end

    function AnimatedSprite:onEnterFrame()
    self.subframe = self.subframe + 1

    if self.subframe > 4 then
    self:removeChild(self.anim[self.frame])

    self.frame = self.frame + 1
    if self.frame > self.nframes then
    self.frame = 1
    end

    self:addChild(self.anim[self.frame])

    self.subframe = 0
    end
    end

    Hope that this will become simpler because I am really a great fan of Gideros.


    Regards,

    Marc

  • evsevs Member
    How about this (project attached)...
     
    -- MovieClip animation - evs
     
    local imageWidth, imageHeight, frameCount = 120, 160, 34
    local pack = TexturePack.new("rotate.txt", "rotate.png")
    local frames = {} -- table for the frames
     
    -- set up MovieClip table from pngs 01 to 34
    for i = 1, frameCount do
     
    	frames[i] = {i, i, Bitmap.new(pack:getTextureRegion(string.format("%02d.png", i)))}
     
    end
     
    local clip = MovieClip.new(frames) -- create clip and start
    clip:setGotoAction(frameCount, 1) -- set clip to loop back to start (1) at end (frameCount)
     
    clip:setPosition(application:getDeviceWidth() / 2 - imageWidth / 2 , 
    			application:getDeviceHeight() / 2 - imageHeight / 2) -- center
     
    stage:addChild(clip) -- show it
    cheers

    evs
    zip
    zip
    Rotate.zip
    221K
  • I will try this out evs, thanks a lot.

    Marc
  • evsevs Member
    BTW regarding self.nframes = #self.anim -- WHAT DOES THIS MEAN?

    using a # gives the count of objects in the table (in the above line the number of frames or bitmaps)

    for example:
    bettyGrable = {1, 2, 3}
     
    print(#bettyGrable) -- object count
    will print 3

    cheers

    evs
  • Hi evs,

    Do you have a game creation I can check? Your example works great. Do you know how I simply can change the framerate. I looked through the docs and tried to use the Event.COMPLETE event but that is not the right way. Now the animation is a little bit to fast.

    Regards,

    Marc
  • evsevs Member
    Hello,

    I haven't released anything yet, just building up my arsenal of routines :D

    Here's a way to animate with the timer (uses the same assets as before)
    -- MovieClip animation timed - evs
     
    local imageWidth, imageHeight, frameCount = 120, 160, 34
    local pack = TexturePack.new("rotate.txt", "rotate.png")
    local frames = {} -- table for the frames
     
    -- set up MovieClip table from 01 to frameCount
    for i = 1, frameCount do
     
    	frames[i] = {i, i, Bitmap.new(pack:getTextureRegion(string.format("%02d.png", i)))}
     
    end
     
    local clip = MovieClip.new(frames) -- create clip and start
     
    animationTimer = Timer.new(70, 0) -- update speed, loop forever
    animationTimer:start()
     
    local currentFrame = 1
     
    local function animate()
     
    	clip:gotoAndStop(currentFrame); 
     
    	currentFrame = currentFrame + 1; 
     
    	if currentFrame == frameCount then 
     
    		currentFrame = 1 
     
    	end 
     
    end
     
    animationTimer:addEventListener(Event.TIMER, animate)
     
    clip:setPosition(application:getDeviceWidth() / 2 - imageWidth / 2 , 
    			 application:getDeviceHeight() / 2 - imageHeight / 2) -- center
     
    stage:addChild(clip) -- show it

    cheers

    evs
  • Thanks again eve.

    Marc
Sign In or Register to comment.