A phaser helper for the typewriter effect

Overview

forthebadge

Phaser-typewriter

A typewriter effect wrapper for Phaser.io Javascript library

Initialize the typewriter anywhere in your game

var typewriter = new Typewriter();
typewriter.init(gameInstance, options);

pass necesery options like: context (the object that launches the typewriter)

typewriter.init(gameInstance, {
    x: 290,
    y: 40,
    fontFamily: "chillerBlack",
    fontSize: 26,
    maxWidth: 300,
    sound: reg.track,
    text: "Some text to be typed!"
  });
  typewriter.start();

View example: Complete example (make sure to listen to the writing sound playing in the background ;) )


Game Instance The game instance that we want the tooltips to appear to, such as "game"

General Options:

  • text: The text to be written automatically
  • x The x position of the text (default: 100)
  • y The y position of the text (default: 100)
  • writerObj A Phaser.Text or Phaser.BitmapText object, pre-created
  • writerFn: The function to call when writing the text (default: null)
  • endFn: The function to call when the writing ends (defailt: null)
  • time: The duration of the animation effect writing each letter (default: 100ms)
  • maxWidth: The maximum width where the text will wrap (default: 200)
  • fontFamily: The font family for the text to be writen (default: Arial)
  • fontSize: The font size for the text (default: 28)
  • sound: The sound effect to play during the typewriter effect, it auto-stops when typing ends (default: null)

API Functions

  • init: Adds the options and game object to the Typewriter constructor
  • start: Enables and starts the typewriter effect
  • destroy: Destroys the typewriter object
  • hideText: Hide the text
  • showText: Show the text
  • moveToTop: Move the text to the top

Buy me a coffee or tea!


The TODO list is diminising!

Please let me know if you come across some bug or have something to contribute

You might also like...

Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip

Dec 30, 2022

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

A motion hover effect for a background grid of images.

A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Dec 31, 2022

fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

Oct 28, 2022

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Nov 15, 2022

A mouse particle effect react component

A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

Dec 17, 2022

Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl

Dec 27, 2022

:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects 🎉 Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

Sep 25, 2022

magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Nov 30, 2022
Comments
  • Text changes the line while beeing written

    Text changes the line while beeing written

    I have only quickly watched the example, but it really stuck out, that the last word in a line flips to the next line if it is too long to fit in the old line.

    With the (really nice) handwriting sound in the background, this effect totally breaks the illusion of something physically beein written.

    If possible the plugin should never try to write a word into the line if it will not fit.

    opened by jppresents 6
  • Issue

    Issue

    If typewriter.start() is called while the typewriter is already running, it prints out the message again, then throws phaser's group index out of bounds error.

    opened by WVI 2
  • Error when not setting bitmap font

    Error when not setting bitmap font

    Hi, I'm getting this error when I dont use bitmap font.

    Phaser.Cache.getBitmapFont: Key "Arial" not found in Cache.
    
    phaser.min.js:3 Uncaught TypeError: Cannot read property 'font' of null
        at c.BitmapText.updateText (phaser.min.js:3)
        at new c.BitmapText (phaser.min.js:3)
        at c.GameObjectFactory.bitmapText (phaser.min.js:3)
        at enableTypingSpecificMessage (typewriter.js:45)
        at start (typewriter.js:26)
        at Object.start (typewriter.js:111)
        at EJ.Story.create (Story.js:20)
        at c.StateManager.loadComplete (phaser.min.js:3)
        at c.Loader.finishedLoading (phaser.min.js:3)
        at c.Loader.processLoadQueue (phaser.min.js:3)
    

    Here my code, even if I comment fontFamily it return error.

    	var typewriter = new Typewriter();
    	typewriter.init(game, {
    		x: 290,
    		y: 40,
    		fontFamily: "Arial",
    		fontSize: 26,
    		maxWidth: 300,
    		sound: this.game.add.audio('track'),
    		text: "Some text to be typed!"
    	});
    	typewriter.start();
    

    Any suggestions?

    opened by eduardobreno 1
  • Truncation

    Truncation

    Sometimes the last word of a message is truncated if that word would have just barely fit within the edge of the message box. If "You ate the chocolate bar" is just wide enough so that "bar" would end the current line, it becomes "You ate the chocolate", without "bar" even being moved to the next line.

    opened by WVI 4
Owner
Michael Dobekidis
I'm a senior front end developer and an application engineer. My passion is coding & gaming, and I'm currently using Swift/Flutter & Javascript/TypeScript/HTML
Michael Dobekidis
Native typewriter effect, without compromises or dependencies.

T-Writer.js Native typewriter effect, without compromises or dependencies. See a demo for ideas/examples. Why Creating a custom typewriter effect can

Christopher Cavalea 508 Dec 1, 2022
:keyboard: Simulate a typewriter effect in vanilla JavaScript.

malarkey Simulate a typewriter effect in vanilla JavaScript. Flexible API allowing granular control Option to repeat the sequence indefinitely Allows

Yuan Qing Lim 237 Nov 18, 2022
The typewriter effect

#No documentation yet! (feel free to write a bit about it) Download Get the raw script, download the complete package or fork it on GitHub. Support @y

Yannick Albert 27 Oct 7, 2020
A basic Typewriter effect.

Remotion video A basic Typewriter template. video.mp4 Commands Install Dependencies npm i Start Preview npm start Render video npm run build Upgrade R

Remotion 14 Dec 6, 2022
⌨️ Lightweight $.Hypertext.Typewriter

⚠️ iOS 13.3 note (April 2020) beep[:true] freezes the typewriter, read more: issue #11 Nice features ?? full HTML support beep-beep Hypertypin' Markup

Benjamin Lips 309 Dec 22, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022