ios - que - spritekit tutorial

Cambiar el tamaño de un SKSpriteNode sin perder calidad

Question

Tengo un SKSpiteNode:

private var btnSound = SKSpriteNode(imageNamed: "btnSound")

Ahora hice esta imagen en Adobe Illustrator con un tamaño de 2048x2048 píxeles (overkill realmente), por lo que tiene una buena resolución. Mi problema es que cuando configuro el tamaño de la imagen, las líneas son dentadas o dentadas ... no lisas.

Así es como lo dimensiono:

        btnSound.position = CGPoint(x: self.frame.width * 1 / 5 , y: self.frame.height * (5.2 / 8))
        btnSound.size.width = self.frame.width * 1 / 7
        btnSound.size.height = btnSound.size.width
        btnSound.zPosition = 1
        self.addChild(btnSound)

Esta es la imagen cuando está en Illustrator (captura de pantalla) y esta es la imagen en la aplicación (captura de pantalla)

Cosas que he intentado:

• Hacer la imagen PDF
• Hacer la imagen PNG
• Convirtiendo el PNG 72 DPI, por lo que es 300 DPI
• Ejecutar en el simulador / dispositivo (iPhone7)
• btnSound.setScale(preDetermineScale)

• Usando la siguiente función, aunque no estoy familiarizado con el método UIGraphicsBeginImageContext. La imagen sale borrosa con esto. Aquí está el código y la imagen resultante:

  func resizeImage(image: UIImage, newWidth: CGFloat) -> UIImage? {
  
  let scale = newWidth / image.size.width
  let newHeight = image.size.height * scale
  UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
  image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
  
  let newImage = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  
  return newImage
  }
  
  func setup() {
  let btnSoundImg = UIImage(named: "btnSound")
  let resizeBtnSoundImage = resizeImage(image: btnSoundImg!, newWidth: self.frame.width * 1 / 7)
  let btnSoundTexture = SKTexture(image: resizeBtnSoundImage!)
  
  btnSound.texture = btnSoundTexture
  btnSound.position = CGPoint(x: self.frame.width * 1 / 5 , y: self.frame.height * (5.2 / 8))
  btnSound.size.width = self.frame.width * 1 / 7
  btnSound.size.height = btnSound.size.width
  btnSound.zPosition = 1
  self.addChild(btnSound)
  }

Soy autodidacta y no he hecho mucha programación, así que me encantaría aprender a hacerlo correctamente, ya que solo estoy buscando soluciones para redimensionar UIImageViews.

Otra idea que tuve fue que tal vez no debería ser un SpriteNode, ya que solo se usa para un botón.

Answer 1

Primero, hay algunas reglas primitivas a seguir, para obtener los mejores resultados.

1. Solo escale por factores de 2. es decir, 50%, 25%, 12.5%, 6.25%, etc.

   De esta forma, los cuatro píxeles en su imagen original se convierten en 1 píxel en su imagen escalada, por cada paso hacia abajo en el tamaño de la escala.

2. Haga que su imagen original sea un cuadrado de un exponente de 2 en tamaño. Entonces: 128x128, 256x256, 512x512, etc. Ya ha cubierto esto con su tamaño de 2048x2048.

3. Activa mipmapping. Esto está desactivado, de forma predeterminada, en SpriteKit, por lo que debe activarlo: https://developer.apple.com/reference/spritekit/sktexture/1519960-usesmipmaps

4. Juega con los diferentes modos de filtrado para obtener la mejor reducción de ruido y bandas en tu imagen: https://developer.apple.com/reference/spritekit/sktexture/1519659-filteringmode , lineal probablemente sea mejor.

5. Como siempre ha sido el caso, el uso juicioso de Photoshop para escalar manualmente le dará los mejores resultados y la menor flexibilidad