Sprite and Special FX (Pixi / Phaser)
Posted: Sun Apr 13, 2014 11:03 pm
Updated
- this is experiment using Pixi 2.2.8 using: tap/click event, deformation FX, blend modes
- I wrapped some pixi functions
- YQL web service is used to download cross-domain images data URI
Code: Select all
; ************************
; PIXI Procedures
; ************************
Procedure.i CreateView(Width,Height,IsFullscreen=#True)
!var renderer = PIXI.autoDetectRenderer(v_Width, v_Height);
!renderer.view.style.position = "absolute"
!renderer.view.style.width = v_IsFullscreen ? "100%" : v_Width + "px";
!renderer.view.style.height = v_IsFullscreen ? "100%" : v_Height + "px";
!renderer.view.style.display = "block";
!document.body.appendChild(renderer.view);
!return renderer;
EndProcedure
Procedure.i CreateStage(ColorRGB)
!return new PIXI.Stage(v_ColorRGB);
EndProcedure
Procedure RenderView(View, Stage, *animationFunction)
!v_View.render(v_Stage);
!requestAnimFrame(p_animationFunction);
EndProcedure
Procedure.i LoadTexture(ImageSrc)
!if (v_ImageSrc.indexOf(';') == -1){
; load PIXI texture from image URL
! var v_newTexture = PIXI.Texture.fromImage(v_ImageSrc);
!} else {
; load PIXI texture from HTML img tag
! var image = new Image();
! image.src = v_ImageSrc;
! var basetexture = new PIXI.BaseTexture(image);
! var v_newTexture = new PIXI.Texture(basetexture);
!}
ProcedureReturn newTexture
EndProcedure
Procedure ScaleEntity(Entity, ScaleX.f=1, ScaleY.f=1)
!v_Entity.scale.x=v_ScaleX;
!v_Entity.scale.y=v_ScaleY;
EndProcedure
Procedure FilterEntity(Entity, Filter)
!v_Entity.filters = [v_Filter];
EndProcedure
Procedure SetEntityColor(Entity, ColorRGB=$FFFFF)
!v_Entity.tint = v_ColorRGB;
EndProcedure
Procedure SetEntityBlendMode(Entity, BlendingMode$="NORMAL") ;NORMAL, ADD, MULTIPLY, SCREEN
!v_Entity.blendMode = PIXI.blendModes[v_BlendingMode$];
EndProcedure
Procedure SetEntityOpacity(Entity, Opacity.f=1)
!v_Entity.alpha = v_Opacity;
EndProcedure
Procedure SetEntityClick(Entity, *ClickFunction)
!v_Entity.interactive=true;
!v_Entity.click = p_ClickFunction;
EndProcedure
Procedure.f GetEntityX(Entity)
!return v_Entity.position.x;
EndProcedure
Procedure.f GetEntityY(Entity)
!return v_Entity.position.y;
EndProcedure
Procedure.i AddEntity(Entity, Parent, x.f=0, y.f=0)
!v_Entity.position.x = v_x;
!v_Entity.position.y = v_y;
!v_Parent.addChild(v_Entity);
EndProcedure
Procedure.i AddGroup(Parent, x.f=0, y.f=0)
Protected newEntity
!v_newEntity = new PIXI.DisplayObjectContainer();
AddEntity(newEntity, Parent, x, y)
ProcedureReturn newEntity
EndProcedure
Procedure.i AddSprite(Texture, Parent, x.f=0, y.f=0)
Protected newEntity
!v_newEntity = new PIXI.Sprite(v_Texture);
AddEntity(newEntity, Parent, x, y)
ProcedureReturn newEntity
EndProcedure
Procedure.i CreateDisplacementFilter(Texture, ScaleX.f=1, ScaleY.f=1)
Protected newEntity
!v_newEntity = new PIXI.DisplacementFilter(v_Texture);
ScaleEntity(newEntity,ScaleX,ScaleY)
ProcedureReturn newEntity
EndProcedure
;{ plugins loader
Macro InitPlugins(IsInitialized=#True) ; internal functions
CompilerIf IsInitialized
!"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
CompilerElse
!window.SpiderPlugins={extensions:{},paths:{},names:[]};
CompilerEndIf
EndMacro
Procedure DeclarePluginResource(Resource.s)
InitPlugins()
!,window.SpiderPlugins.names.push(v_Resource)
EndProcedure
Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
InitPlugins()
!,window.SpiderPlugins.paths[v_Plugin]=v_Path
!,v_IsUsed && window.SpiderPlugins.names.push(v_Plugin);
EndProcedure
Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False)
!var cfg=$.extend({ enforceDefine: v_EnforceDefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
!requirejs.config(cfg);
!require(window.SpiderPlugins.names, p_FunctionUsingPlugins);
InitPlugins(#False)
EndProcedure
;}
;{ yahoo web service
Procedure.i ConvertYahooJSONToDataURI(YahooJSON)
!return v_YahooJSON.query.results.url;
EndProcedure
Procedure.s QueryYahooURL(Query.s, FormatJSON=#True, YahooQueryURL.s="https://query.yahooapis.com/v1/public/yql?diagnostics=false&callback=&q=")
Protected url.s=YahooQueryURL+URLEncoder(Query)
If FormatJSON
url+"&format=json";Results will be formatted in JSON
Else
url+"&format=xml" ;Results will be formatted in XML
EndIf
ProcedureReturn url
EndProcedure
;}
; ************************
; EXAMPLE - Sprite And FX
; ************************
Global View,Stage,DisplaceFilter
Procedure AnimateView()
If DisplaceFilter
!v_DisplaceFilter.offset.x+=1;
!v_DisplaceFilter.offset.y+=1;
EndIf
RenderView(View, Stage, @AnimateView())
EndProcedure
Procedure ClickCarrot(EventData)
Protected Entity
!v_Entity = v_EventData.target
SetEntityColor(Entity, $00FF00)
SetEntityBlendMode(Entity,"SCREEN")
EndProcedure
Procedure CreatePIXIView(pixi, carrotJSON, grayscaleJSON)
!PIXI=v_pixi;
View=CreateView(1280,800)
Stage=CreateStage(RGB(0,0,0))
Protected carrotTexture=LoadTexture(ConvertYahooJSONToDataURI(carrotJSON))
Protected grayscaleTexture=LoadTexture(ConvertYahooJSONToDataURI(grayscaleJSON))
DisplaceFilter=CreateDisplacementFilter(grayscaleTexture,5,5)
Protected carrot,group
group=AddGroup(Stage,0,0)
FilterEntity(group,DisplaceFilter)
For i=0 To 40
carrot=AddSprite(carrotTexture, group, Random(1280), Random(800))
SetEntityClick(carrot,@ClickCarrot()) ;on click event
carrotScale.f=0.25+(1-Abs(400-GetEntityY(carrot))/400)
ScaleEntity(carrot,carrotScale,carrotScale)
carrotOpacity.f=0.25+(1-Abs(400-GetEntityY(carrot))/400)
If carrotOpacity>1 : carrotOpacity=1 : EndIf
SetEntityOpacity(carrot,carrotOpacity)
Next
RenderView(View, Stage, @AnimateView())
EndProcedure
;urls to download cross-domain image data URI via YQL service
carrotURL$=QueryYahooURL("select * from data.uri where url='http://png-1.findicons.com/files/icons/1274/arcade_daze/128/carrot_bonus.png'")
grayscaleURL$=QueryYahooURL("select * from data.uri where url='http://i442.photobucket.com/albums/qq144/nheil29/my%203d-contemporary/grndbmp.jpg'")
DeclarePlugin("pixi","//cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.8/pixi") ;PIXI plugin To create sprite
DeclarePlugin("text","//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text",#False) ;JSON plugin prerequisites
DeclarePlugin("json","//cdnjs.cloudflare.com/ajax/libs/requirejs-plugins/1.0.3/json",#False) ;JSON plugin
DeclarePluginResource("json!"+carrotURL$+"!bust") ;Import json (append: !bust => using cache)
DeclarePluginResource("json!"+grayscaleURL$+"!bust") ;Import json (append: !bust => using cache)
UsePlugins(@CreatePIXIView())