PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

Check out the promotional video for the project before you start

Buy New Year goods, make dumplings, cut window decorations, paste Spring Festival couplets, wear new clothes, set off fireworks, watch the Spring Festival Gala, visit the temple fair…

With a sense of ritual New Year customs

Hiding people’s warmest Spring Festival memories

Nowadays, the flavor of New Year seems to be getting weaker and weaker

We want to design an interactive picture book about the traditional Chinese New Year

Let children feel the charm of traditional Chinese New Year without leaving home

Find the full Spring Festival memories.

project

After the project was set up, I searched a lot of picture books and materials related to the Spring Festival in the bookstore and extracted some of the most representative elements of the traditional Spring Festival. During this process, I also found many good books, among which the most influential pop-up book is Happy Chinese Year, published by lele Fun, a well-known children’s book publishing house.

This book a large number of exquisite interactive elements design, give us a lot of inspiration, we can also make a playable book on mobile phones? And make full use of the advantages of intelligent devices, to achieve some physical books due to the production process limitations can not achieve interactive experience?

perform

The whole project process can be roughly divided into:

Story script -> scene/character setting -> Storyboard -> Art -> music/sound production -> voice-over/character dubbing -> scene animation/character skeleton animation/special effects -> program function development

Due to the limited space, this paper mainly selects several representative scenarios to provide solutions

The project was developed using Cocos Creator2.4.0

The function development

Scene 1: Cleaning

In the cleaning scene, in addition to the conventional touch operation, we hope to explore more interesting interaction modes. Children can wipe the Windows clean by daubing. The principle is as follows:

  1. Overlay the window with a stain layer
  2. Add the Mask component to the parent node of the stain node (the stain layer will be displayed by the parent node Mask) and check the inverted option to display the inverted picture of the stain node.
  3. Rewrite the Mask’s graphic to draw custom Mask graphics
start () {
    this._graphics = this.mask._graphics  // Get the canvas object of the mask component
    this.node.on('touchmove'.(e) = > {
        let point = e.getLocation()
        this.clearMask(point) // Draw the mask according to the finger touch point
    })
}
clearMask (point: cc.Vec2) {
    // Redraw the Mask as a stain Mask
    this._graphics.moveTo(prevPos.x, prevPos.y)
    this._graphics.lineTo(pos.x, pos.y)
    this._graphics.lineWidth = 40
    this._graphics.stroke()
}
Copy the code

In this scene, I also designed an egg. I hid the character “Fu” behind the screen, and clicking on the screen required a folding screen effect:

In fact, the folding screen’s pseudo-3D effect only requires a simple zooming animation:

cc.tween(this._byobu)
    .to(1, { scaleX: :0.65 }, { easing: 'elasticOut' })
    .start()
Copy the code

Scene two: Post year red

Implementation scheme:

  1. Spring Festival couplets, paper-cuts: drag adsorption
  2. Window: mask
  3. Open the door: Shader UV animation (more complex, do not unfold)
  4. Horizontal: Graphics (Canvas base drawing method, lineTo stroke)

Scene 3: Prepare lunar New Year dishes

Implementation scheme

  1. Steamed buns: drag and drag + collision detection, steamed smoke: Particle effects (Particle effects can be directly used by CoCOS by adjusting effect parameters in particle software to generate PLIST)
  2. Grinding tofu: Rotating gesture, liquid effect is achieved by a picture of Y-axis scaling, bucket with three layers of pictures superimposed

  1. Add firewood: make a flame particle, each time add a firewood, increase the number of particles emitted, simulate the fire burning more and more prosperous effect

let fire = this.node.getComponent(cc.ParticleSystem)
fire.startSize += 10  // Increases the initial particle emission size
fire.endSize += 5   // Increase particle end size
fire.life += 0.2  // Increases particle health
Copy the code

Scene four: New Year’s Eve dinner

Implementation principle: drag + collision avoidance

Scene 5: Fireworks

It mainly introduces the realization principle of lead animation

  1. Draw path data according to lead graph in PS, and get SVG path data
  2. Add a Mask component to the lead parent node for clipping the lead
  3. Customize mask graphics and set to reverse mask
  4. Use Tween or GSAP to draw a circle from the end of the lead along the SVG path data for mask painting to achieve the effect of the lead slowly burning out:

ignate () {
    const sparkProxy = {
        x: this._sparkNode.x,
        y: this._sparkNode.y,
        rotation: -this._sparkNode.angle
    }

    const svgPath = "M567.5, 553.5 c - 1.13-0.22-2.92-0.42-5..." / / fuses SVG
    GSAP.to(sparkProxy, {
        motionPath: {
            path: svgPath,
            autoRotate: true
        },
        duration: 5.ease: "none".onUpdate: () = > {
            // Let the flame follow the burned end of the lead
            this._sparkNode.x = sparkProxy.x - 508  
            this._sparkNode.y = sparkProxy.y - 392
            this._sparkNode.angle = sparkProxy.rotation
            // Custom draw lead mask graph, draw the area so that the lead is not visible
            this.clearMask(cc.v2(sparkProxy.x, sparkProxy.y)))
        }
    })
}
clearMask(pos: cc.Vec2) {
    const graphics = this.mask._graphics
    graphics.circle(pos.x, pos.y, 5)
    graphics.fillColor = cc.color(0.0.0.255)
    graphics.fill()
}
Copy the code

Scene six: Putting on new clothes

Implementation scheme: Drag and adsorption (same as scene 4)

Scene seven: Dragon and lion dance

In this scene, children can freely control the performance of the dragon dance team, and the sound effects played by each traditional instrument should correspond to the rhythm of the character skeleton animation. You can emit events in the corresponding action frame in the timeline of DragonBones, and capture corresponding events in Cocos to play the sound effects

let dragonDisplay = this.xxx.getComponent(dragonbones.ArmatureDisplay)
dragonDisplay.on('dragonBones.EventObject.SOUND_EVENT'.() = > {
    // Listen for the frame event of the skeleton animation, and play the sound when the animation plays to the corresponding point
    cc.audioEngine.playEffect(this.audioYoho)
})
Copy the code

The last

The above is the technology sharing this time. It just fits the theme of the Spring Festival activity when I think of the project I did before. This project was started last year, and I don’t remember many details of the implementation clearly

Online Experience Address

Happy Chinese Year H5 edition – White Bear interactive picture book

Our APP is also available on the APP STORE/ Android APP Stores

Search: White Bear Interactive picture book Download native app for best experience

If you have children at home, you can play and learn knowledge while playing the game. You can find 8 “Fu” Easter eggs in the picture book and get 100% cash red packets (a small advertisement).

All right, pack up and go home for Chinese New Year