Help Centre

import { Image, Platform } from 'react-native';

const mascotSource = Platform.select({
  android: require('./mascot-wave.webm'),
  ios: require('./mascot-wave.apng'),
  default: require('./mascot-wave.webm'),
});

export function Mascot() {
  return (
    <Image
      source={mascotSource}
      style={{ width: 200, height: 200 }}
      resizeMode="contain"
    />
  );
}

<!-- WebM for Chrome/Android, APNG fallback for Safari/iOS -->
<picture>
  <source srcset="mascot-wave.webm" type="video/webm" />
  <img src="mascot-wave.apng" alt="Mascot waving" width="200" />
</picture>

<!-- Or use a video tag for more control -->
<video
  autoplay loop muted playsinline
  width="200" height="200"
  poster="mascot-static.png"
>
  <source src="mascot-wave.webm" type="video/webm" />
  <source src="mascot-wave.mp4" type="video/mp4" />
</video>

// 1. Import your spritesheet PNG into Assets/Sprites/
// 2. Select the texture → Inspector:
//    - Sprite Mode: Multiple
//    - Pixels Per Unit: 100
// 3. Open Sprite Editor → Slice → Grid By Cell Count
//    - Set columns & rows (included in download metadata)
// 4. Create Animation from sliced sprites:
//    - Select all frames → drag into Scene
//    - Unity auto-creates an Animation clip

// To play via script:
Animator anim = GetComponent<Animator>();
anim.Play("mascot-wave");