Fixed background scaling issues in landscape view.

This commit is contained in:
lightheel 2025-08-08 13:20:40 -04:00
parent 16cd7abce8
commit 5ed7d117f5

View File

@ -903,13 +903,18 @@ fun MiddleBattleView(
} }
} }
// Horizontal line separator // Horizontal line separator (hidden in landscape mode)
val lineConfiguration = LocalConfiguration.current
val isLandscapeMode = lineConfiguration.orientation == android.content.res.Configuration.ORIENTATION_LANDSCAPE
if (!isLandscapeMode) {
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.height(2.dp) .height(2.dp)
.background(Color.Black) .background(Color.Black)
) )
}
// Player Digimon (bottom half) // Player Digimon (bottom half)
Box( Box(
@ -2295,27 +2300,24 @@ fun AnimatedBattleBackground(
backgroundBitmap?.let { bitmap -> backgroundBitmap?.let { bitmap ->
Box(modifier = modifier.fillMaxSize()) { Box(modifier = modifier.fillMaxSize()) {
// First image (main) // Calculate how many times to repeat the image to fill the screen width
Image( val configuration = LocalConfiguration.current
bitmap = bitmap.asImageBitmap(), val isLandscapeMode = configuration.orientation == android.content.res.Configuration.ORIENTATION_LANDSCAPE
contentDescription = "Animated Battle Background 1", val imageWidth = if (isLandscapeMode) screenWidth.value * 1.5f else screenWidth.value
modifier = Modifier val repeatCount = (imageWidth / screenWidth.value).toInt() + 2 // Add 2 for seamless looping
.fillMaxSize()
.offset(x = xOffset.dp),
contentScale = ContentScale.FillBounds
)
// Second image (for seamless loop) repeat(repeatCount) { index ->
Image( Image(
bitmap = bitmap.asImageBitmap(), bitmap = bitmap.asImageBitmap(),
contentDescription = "Animated Battle Background 2", contentDescription = "Animated Battle Background ${index + 1}",
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.offset(x = (xOffset + screenWidth.value).dp), .offset(x = (xOffset + (index * screenWidth.value)).dp),
contentScale = ContentScale.FillBounds contentScale = ContentScale.FillBounds
) )
} }
} }
}
} }
// Data class to define background sets // Data class to define background sets
@ -2407,26 +2409,32 @@ fun MultiLayerAnimatedBattleBackground(
} }
} }
// Animate all three layers with different speeds // Animate all three layers with different speeds (slower in landscape mode)
val bgConfiguration = LocalConfiguration.current
val isLandscapeMode = bgConfiguration.orientation == android.content.res.Configuration.ORIENTATION_LANDSCAPE
LaunchedEffect(screenWidth) { LaunchedEffect(screenWidth) {
if (screenWidth > 0.dp) { if (screenWidth > 0.dp) {
while (true) { while (true) {
delay(50) // Update every 50ms for smooth animation delay(50) // Update every 50ms for smooth animation
// Adjust speed based on orientation
val speedMultiplier = if (isLandscapeMode) 0.5f else 1f
// Back layer moves slowest (parallax effect) // Back layer moves slowest (parallax effect)
backLayerXOffset -= 0.5f backLayerXOffset -= 0.5f * speedMultiplier
if (backLayerXOffset <= -screenWidth.value) { if (backLayerXOffset <= -screenWidth.value) {
backLayerXOffset = 0f backLayerXOffset = 0f
} }
// Middle layer moves at medium speed // Middle layer moves at medium speed
middleLayerXOffset -= 1f middleLayerXOffset -= 1f * speedMultiplier
if (middleLayerXOffset <= -screenWidth.value) { if (middleLayerXOffset <= -screenWidth.value) {
middleLayerXOffset = 0f middleLayerXOffset = 0f
} }
// Front layer moves fastest // Front layer moves fastest
frontLayerXOffset -= 1.5f frontLayerXOffset -= 1.5f * speedMultiplier
if (frontLayerXOffset <= -screenWidth.value) { if (frontLayerXOffset <= -screenWidth.value) {
frontLayerXOffset = 0f frontLayerXOffset = 0f
} }
@ -2435,64 +2443,50 @@ fun MultiLayerAnimatedBattleBackground(
} }
Box(modifier = modifier.fillMaxSize()) { Box(modifier = modifier.fillMaxSize()) {
// Calculate how many times to repeat the image to fill the screen width
val imageWidth = if (isLandscapeMode) screenWidth.value * 1.5f else screenWidth.value
val repeatCount = (imageWidth / screenWidth.value).toInt() + 2 // Add 2 for seamless looping
// Back layer (underneath everything) // Back layer (underneath everything)
backLayerBitmap?.let { bitmap -> backLayerBitmap?.let { bitmap ->
repeat(repeatCount) { index ->
Image( Image(
bitmap = bitmap.asImageBitmap(), bitmap = bitmap.asImageBitmap(),
contentDescription = "Back Layer Battle Background 1", contentDescription = "Back Layer Battle Background ${index + 1}",
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.offset(x = backLayerXOffset.dp), .offset(x = (backLayerXOffset + (index * screenWidth.value)).dp),
contentScale = ContentScale.FillBounds
)
Image(
bitmap = bitmap.asImageBitmap(),
contentDescription = "Back Layer Battle Background 2",
modifier = Modifier
.fillMaxSize()
.offset(x = (backLayerXOffset + screenWidth.value).dp),
contentScale = ContentScale.FillBounds contentScale = ContentScale.FillBounds
) )
} }
}
// Middle layer // Middle layer
middleLayerBitmap?.let { bitmap -> middleLayerBitmap?.let { bitmap ->
repeat(repeatCount) { index ->
Image( Image(
bitmap = bitmap.asImageBitmap(), bitmap = bitmap.asImageBitmap(),
contentDescription = "Middle Layer Battle Background 1", contentDescription = "Middle Layer Battle Background ${index + 1}",
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.offset(x = middleLayerXOffset.dp), .offset(x = (middleLayerXOffset + (index * screenWidth.value)).dp),
contentScale = ContentScale.FillBounds
)
Image(
bitmap = bitmap.asImageBitmap(),
contentDescription = "Middle Layer Battle Background 2",
modifier = Modifier
.fillMaxSize()
.offset(x = (middleLayerXOffset + screenWidth.value).dp),
contentScale = ContentScale.FillBounds contentScale = ContentScale.FillBounds
) )
} }
}
// Front layer (on top of other backgrounds) // Front layer (on top of other backgrounds)
frontLayerBitmap?.let { bitmap -> frontLayerBitmap?.let { bitmap ->
repeat(repeatCount) { index ->
Image( Image(
bitmap = bitmap.asImageBitmap(), bitmap = bitmap.asImageBitmap(),
contentDescription = "Front Layer Battle Background 1", contentDescription = "Front Layer Battle Background ${index + 1}",
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.offset(x = frontLayerXOffset.dp), .offset(x = (frontLayerXOffset + (index * screenWidth.value)).dp),
contentScale = ContentScale.FillBounds
)
Image(
bitmap = bitmap.asImageBitmap(),
contentDescription = "Front Layer Battle Background 2",
modifier = Modifier
.fillMaxSize()
.offset(x = (frontLayerXOffset + screenWidth.value).dp),
contentScale = ContentScale.FillBounds contentScale = ContentScale.FillBounds
) )
} }
} }
}
} }