Using @2x bg image can resolve the composer transition problem?

Getting Started Newbie Questions
#1

Hi guys!

I’m already in the final stage of my app development, I had put aside the problem with the composer transitions. Now that I set out to clean the modules a bit, refine the assets and give the last details to my app I’m thinking not including @2x background image could be the cause of the strange composer transitions behavior. Try to delay but what happens is that the delay passes and then the transitions continue behaving the same. The behavior they have is the scene is fired the first time with no transition and only if it is re-entered the transitions works well.

some help?

#2

Does it work correctly with a 1x background image instead of a 2x background image? 

#3

@sporkfin

No, it does not work well, I’m using a 768x1024 content area, zoomEven, and I thought, since the background is a blurry image, scaling up or down would not affect the App’s aesthetics at all. I only use super-light images of 768x1024px with a maximum weight of 45kb.

It feels as if when changing the scene the transition is not well appreciated because it has to load a 768x1024 image and scale it. Maybe if I have a @2x file reduce the load impact of the scene. Rather I want to understand how Corona SDK handles those loads of images.

#4

Can you share some images or, better yet, a video of the problem?

Also please share the code you are using for the transition.

#5

Also can you post your config.lua file?  

Rob

#6

If a composer.* scene is delayed when you try to show it, that may mean it is too busy in the create() call to show in the frame you ask it to.  You may also be bogging down the system by destroying content at the same time.

#7

You could pre-load the background image while your splash screen shows:

https://docs.coronalabs.com/guide/graphics/textureManagement.html

#8

I appreciate all the help. Before uploading anything, I would like to try it once more. The problem is that I can not understand how external modules work. I read this guide: https://docs.coronalabs.com/tutorial/basics/externalModules/index.html more than 20 times and I can not see it. I even managed to pass an image to another module, but when I try to use it in another module, in addition to the one I was using before, it disappears from the initial module where it is used. It’s a problem of scope, I know, could someone help me in how the images are transmitted from one module to another, especially the background images? It is not as simple as importing a batch in Photoshop. I’m sorry, I think as a graphic artist, not as a programmer.

gotoScene code

local options1 = { effect = "fromBottom", time = 100 } local function esButtonTouch( event ) --the buttons are set in a scrollView if ( event.phase == "moved" ) then dy = math.abs( event.y - event.yStart ) if ( dy \> 5 ) then ScrollView:takeFocus( event ) end elseif ( event.phase == "ended" ) then audio.play( go ) composer.gotoScene( "scenes.menu-es", options1 ) end return true end

config.lua

-- -- For more information on config.lua see the Project Configuration Guide at: -- https://docs.coronalabs.com/guide/basics/configSettings -- application = { content = { width = 768, height = 1024, scale = "zoomEven", fps = 60, imageSuffix = { ["@2x"] = 2, --["@4x"] = 4, }, }, }
#9

I’m thinking of load the 5 backgrounds in the main.lua and making them visible in the scene “show” and invisible in the scene “hide” of each of the scenes.   :D  :lol:  :lol:  :D 

#10

@dodi - That approach could really bog down your frame rate and inflate your video memory usage.  i.e. It could have serious repercussions on the performance of your game, especially on low-end devices.

#11

@roaminggamer

In this case is not a game is an utility app. This answer refers to load backgrounds in an external module or to load them in the “main.lua”?

#12

@all

can someone tell me where can I learn how to load textures in an external module to use them as display objects on other app scene?

Thanks in advance

#13

First, your @2x images will only load on devices that are 1536px wide. This includes most retina iPads and perhaps some Android tablets. All current phones (that I’m aware of) are 1440px or less, so they are going to use your 1x images.

These tablets should be sufficiently powerful enough to load a 1536x2048 image quickly.  

What issues are you having? I’ve read this thread several times and I’m not exactly sure what issue you’re trying to solve. Corona and almost every reasonably modern device should be powerful enough to load the right 1x or @2x image in during scene:create() for a background without causing any hiccups.

Rob

#14

@dodi - Load or display?
 
I think you mean display.  Based on that I have made a small example with four composer scenes 1…4.  Each scene is almost exactly the same, but calls a function in the module mod.lua to create the content in that scene.
 
This shows how to set up a nice composer scene file AND how to use a module to create content (including backgrounds) in scenes.
 
https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/dodi.zip
 
 
Suggestion: Edit mod.lua and change this line to have the scene to scene transition parameters you want to explore.
 
Line 53: easyButton.easyPush( button, function() composer.gotoScene( “scene” … i,  { time = 500, effect = “crossFade” } ) end )
 
See if the lag/problem occurs with my code.
 
-Ed

#15

Also your transition time of 100ms is a mere 1/10th of a second which isn’t a long transition, but that transition shouldn’t start until after the scene is created. So if you’re loading your backgrounds in scene:create() it might delay the transition from starting, but once it starts, it should be smooth.

Rob

#16

Rob and I agree here. If your create() call is doing too much work it will delay the ‘transition’

#17

As soon as I arrive at the studio I will follow @roaminggamer instructions and keep them up to date on how the transitions behave, actually thank you very much for all your time and comments.

#18

@dodi to test if your images are the issue try a simple black or white png a simple 1x1 png loaded and stretched to fill the screen will be fine.  

If your scene transition is smooth then the (physical) size of your image is the problem.  If not the problem will be in your scene creation code.

#19

@SGS

I make the test using a solid color image “100x100 png”, transition time 600, no delay occur, so the problem here is the 768 x 1024 bg images load.

#20

@roaminggamer

I want to tell you that you are a very professional programmer, wao, thanks for the example, I will keep it and study it thoroughly. I still have a lot to learn. I would practically start a new app if I try to adapt my app to your code. Thank you very much, I’m going to immerse myself in it and see how I can understand it.