Comic Simple

A Four Panel Cartoon

A simple cartoon tutorial. You may publish it for HTML5. Please download the latest Kwik4

Here is the sample project I made up.

• https://kwiksher.com/tutorials/Kwik4/ComicD.zip

• Preview https://kwiksher.com/demo/comic-the-dott/

Special thanks to Dott Inc for a cartoon sample. You can read their stories in FB of Dott Inc

unzip and run build4/main.lua with corona simulator to review. The cartoon starts automatically one panel by one panel in 3 seconds and ends with the whole image

Page 1

page1 consists of the following layers

• -panels is a layer group and panel coordinates are specified with rectangles on top of panels. Please notice the hyphen(-) at the first character. -panels tells Kwik that it is panel coordinates.

• balloons group has the balloon images with text

• background is the art layer.

  You can not use a layer group as the background in a comic page.

these names(-panels, balloons, background) are used in the lua files, so don’t change them.

The size of the background layer of this sample is 1280x1920 including the four panel cartoon on the grey painted area. You may enlarge it for iPhoneX if necessary, please read Photoshop Settings for more information.

the layer group of “balloon” contains balloons of panels.

• Each balloon name must have the digit of the panel after prefix ‘b’
• For instance, for the panel name is “1”, the balloons with “b11” and “b12” are displayed.

For your own cartoon

• change the background layer to yours
• adjust the panel rectangle’s positions and sizes to fit your panels. You may add panels more than 4
• create balloons under the balloons group
• associate the balloon’s name with the panel index

act_init

Project&Pages > Action to create an action. It is named as act_init

From Code, choose External Code to set auto.lua

timer_init

create a timer which starts when the page is loaded and calls act_init

auto.lua is the external code to start the panel transition on the page

local panels = require("components."..UI.page..".page_meta_panels")
panels:reset()
panels:start(1, false)

Page Properites - Comic

Enable Comic Page checkbox.

Build for HTML5

That’s all, Publish and Enjoy!