Page 1 of 1

Sprite and Special FX (Pixi / Phaser)

Posted: Sun Apr 13, 2014 11:03 pm
by eddy
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
Image
Image

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())

Re: Sprite and Special FX (Pixi)

Posted: Fri Apr 18, 2014 11:06 pm
by eddy
using Phaser

Code: Select all

Declare LoadScript(Script$, *OnLoadFunction)
Declare InitScripts()
Declare CreateScreen(Width,Height,Title.s,*PreloadFunction=0,*StartFunction=0,*UpdateFunction=0,*RenderFunction=0)
Declare PreloadGame()
Declare CreateGame()
Declare UpdateGame()
Declare RenderGame()

;  ************************************
;- JQUERY wrapper
;  ************************************

Procedure LoadScript(Script$, *OnLoadFunction)
  !$.getScript(v_Script$,p_OnLoadFunction);
EndProcedure 

;  ************************************
;- PHASER wrapper
;  ************************************

Procedure.i CreateScreen(Width,Height,Title.s,*PreloadFunction=0,*StartFunction=0,*UpdateFunction=0,*RenderFunction=0)
  !window.game = new Phaser.Game(
  !   v_Width, v_Height, Phaser.AUTO, v_Title, {
  !   preload: p_PreloadFunction, create: p_StartFunction, update: p_UpdateFunction, render: p_RenderFunction
  !});   
  !return game;
EndProcedure

Procedure SetScreenBackColor(BackColor)
  !game.stage.backgroundColor = v_BackColor;  
EndProcedure


Procedure.i LoadImageSheet(ImageName.s,ImageUrl.s, FrameWidth=0, FrameHeight=0, FrameCount=-1)
  If FrameWidth=0 Or FrameHeight=0
    !return game.load.image(v_ImageName, v_ImageUrl);
  Else 
    !v_FrameCount=v_FrameCount==-1?undefined:v_FrameCount; 
    !return game.load.spritesheet(v_ImageName, v_ImageUrl, v_FrameWidth, v_FrameHeight, v_FrameCount);
  EndIf   
EndProcedure

;----- Tilemap 

Procedure.i CreateTileMap(ImageName.s)
  !var newMap = game.add.tilemap();
  !newMap.addTilesetImage(v_ImageName);
  !return newMap;
EndProcedure

Procedure.i CreateTileLayer(LayerName.s, TileMap, Width, Height, TileWidth, TileHeight, ScrollFactorX.f=1, ScrollFactorY.f=1)
  !var newLayer = v_TileMap.width ? 
  ! v_TileMap.createBlankLayer(v_LayerName, v_Width, v_Height, v_TileWidth, v_TileHeight):
  ! v_TileMap.create(v_LayerName, v_Width, v_Height, v_TileWidth, v_TileHeight);
  !newLayer.scrollFactorX = v_ScrollFactorX;
  !newLayer.scrollFactorY = v_ScrollFactorY;
  !return newLayer;
EndProcedure

Procedure UpdateTileLayer(Layer, TileNumber, x, y)
  !v_Layer.map.putTile(v_TileNumber, v_x, v_y, v_Layer);
EndProcedure

Procedure TileLayerWidth(Layer)
  !return v_Layer.width
EndProcedure

Procedure TileLayerHeight(Layer)
  !return v_Layer.height
EndProcedure

;----- Filter

Procedure.i CreateDisplacementFilter(ImageFile.s, ScaleX.f=30, ScaleY.f=30, OffsetX.f=0, OffsetY.f=30)
  !var newTex = PIXI.Texture.fromImage(v_ImageFile);
  !var newFilter = new PIXI.DisplacementFilter(newTex);
  !newFilter.scale.x=v_ScaleX;
  !newFilter.scale.y=v_ScaleY; 
  !newFilter.offset.x=v_OffsetX;
  !newFilter.offset.y=v_OffsetY; 
  !return newFilter;
EndProcedure 

;----- Entity

Procedure SetEntityAlpha(Entity, Alpha.f=1.0)
  !v_Entity.alpha=v_Alpha;
EndProcedure 

Procedure SetEntityFilters(Entity, Filter1=0, Filter2=0, Filter3=0, Filter4=0)
  !var newFilters=[];
  If Filter1 
    !newFilters.push(v_Filter1) 
  EndIf 
  If Filter2 
    !newFilters.push(v_Filter2) 
  EndIf 
  If Filter3 
    !newFilters.push(v_Filter3) 
  EndIf 
  !v_Entity.filters=newFilters;
EndProcedure 

Procedure.i RandomInteger(Min,Max)
  !return game.rnd.integerInRange(v_Min,v_Max)
EndProcedure

;  ************************************
;- EXAMPLE 
;  ************************************

Procedure ScriptLoaded()
  Static Steps=0
  Select Steps 
    Case 0
      LoadScript("https://raw.githubusercontent.com/photonstorm/phaser/master/build/phaser.min.js",@ScriptLoaded())
    Case 1
      LoadScript("https://raw.githubusercontent.com/photonstorm/phaser/master/src/pixi/filters/AbstractFilter.js",@ScriptLoaded())
    Case 2
      LoadScript("https://raw.githubusercontent.com/photonstorm/phaser/master/src/pixi/filters/DisplacementFilter.js",@ScriptLoaded())
    Case 3
      CreateScreen(800, 600,"phaser-example",@PreloadGame(),@CreateGame(),@UpdateGame(),@RenderGame())
  EndSelect  
  Steps+1  
EndProcedure

Global DisplaceFilter
Global TileMap,TileLayer1,TileLayer2
Procedure PreloadGame()  
  DiamondSpriteSheet=LoadImageSheet("diamond_5x1", 
                                  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABACAYAAABr564eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADBBJREFUeNrsnW2MFeUZhud0F7euJEIXUGNOP+LiphVaGy3U7ZeSkkCzxpZSNpZEE9M0TUOs/sE/NiHRP21o2hrSYJuY2HTbYKEf6VZpMVtEiwVCRHal2Y8GdcHguouocBDY7Wk6M/e073PmOe+8c77mcO7rzzBn3jkz77I758r9zDMnVywWPUIIaUU+wB8BIYQXQEII4QWQEEJ4ASSEEF4ACSGEF0BCCOEFkBBCeAEkhBBeAAkhhBdAQgjhBZAQQngBJIQQXgAJIYQXQEII4QWQEEIaR3u133B0wUf9Bwx2z7vSX2/76ueN7XN/eMFYl9slGD9x6by/7Dnzai7LP9DRR3L+/LuuD9Y7l95ibC+MHzbW5XYJxs+cDNZ7vl/M9PxXDS7w53/Nsg5//dMLP2tsf+ntfxjrcrsE498cueAvh/rOZHr+L3ZN+vPPfzDvr1+xytx+cchcl9slGD/5/qS/vG0mn+n59zw14c9/+Uc+5K8vC5dg5LXTxrrcLsH44XA5uqG7qvOnARJCWpZc2idCw/RAZHzbHgvMbb350da20/zoU7c/+1SsKUpghNEnT53NEKYHYHyL1n47OP8lPzPnN/Vdc/7K9sLE4VhTlMAIo/nX2QxhegDGd2/+e/5ytfeQMX6P9wNjXdt+9OyBWFOUwAhBvc0QpgdgfJ2PButX3zNnjH/nl23GurZ9dijeFCUwQlBvM4TpARhf/8pguW7OnN/v2sz5a9tfORVvipJhsT2tGdIACSE0wLTGFxlMnczPZoTjlwr+su/cVFU/ETXjA/UyP5sRYtm7vbpGqBkfqJf52YxwZjz4PXj5wQtVnb9mfKBe5mczwtfPB8v+Qm9V568ZH6iX+dmMcGYqWE5vWpFo/jRAQggNUGNu8cf9AajWllRxG2x+tTbB6ScC80O1Vhpao82v1iZ496vX+PNHtVYaWqPNr9YmeOJ6z58/qrXS0BptfrU2wfUHTvvzR7VWGlqjza9SE6QBEkJogKr5hYYnTS1r5he9f2iqo7/dU5EJwvxgeNLUsmZ+kZGEpjq593BFJgjzg+FJU8ua+QGY6u7nn6vIBGF+MDxpalkzPwBT/dfTlZkgzA+GJ00ta+YHYKq/2TeRyARpgIQQGqBqfiA0togvbzAMLyvmJxn89R/95URogg9cPJtzMT8AY4tMq/sWw/CyYn6SIwOhCZ4I1u8cLG+C0vwAjA18cv5Kw/CyYn6SgSd2+8v3jwcmMvrYbM7F/MCsMLX2VabhZcX8JH/btd9fvhaa4OZif87F/ACMDdx0rWl4WTE/ybadB4Pf/+ngeMUta3I0QEII+X8DxH1+PY//orz5aQgjbLT5AZkFaiaI+/x6vlXe/FQDE0bYaPMDMgvUTBD3+W1eu7ms+WlII2y0+QGZBWomiPv8erbmy5qfhjTCRpsfkFmgZoK4z+/RDd1lzU9DGmGjzQ/ILFCaIA2QENKyRE+DkZ0dSU1PGl6bYoyu5id7feV5Rvf7hRnf0nmdwSfZN1Yb47GOcRqysyOp6UnD8yZWxu7nan6y1"+
                                  "1eeJ7aPHTxsvJ6/3TRCrM8MlD++7OxIanrS8I5662L3czU/2esrzxPbB8aDjK9rafB7seYLXzLGYx3jNGRnR1LTk4Y3M9QWu5+r+cleX3me0f1+u4Llh68MXr/hK+Y8sI5xGsstJqWZnjS8V7z4+bua37AyHueJ7XsPBYbXtSR4/e4vmgaLdWSBEhogIYQGWAJMzjXbOzUS/37bvbL7D1oMTRpdd3g8ZHvRUjFCrCMDtAGjk8aHhEPL9hbeOxv7fh29Yv5i/yMDyQzxf4Ynsj0sB+KNMDLHE8l+MWB0rtner/JvxL/hfK/s/qjW2oDRvbQsOB6yPSw1I8T6yeNnEx0HRuea7V33+lyi95f7o1prA0aXHwrN7ryZ8WlGiHVkgDZgdCXZXrjQsr0dt14d/4aLzdfl/pqhSZYJw9s7ZXZ+4H2kEWIdGSANkBBCA8Q/kKl1b7o/MBRbp0fKqi72nxPH6Qu3JzXBqPqrjJdGCPPbeemcv3xAjI8yt2d+7i9snR5pq7rYf1oc5+aNnpMJRtXfg/HjpRHC/P4yOs9f3inGI1N70vupv7R1eqSt6mL/JyfN43j3eU4miOrvMS9+vDRCVH/fOxRvaMjU8g8ne65f2qou9i887BnHucPrdTLBqPq7K367NEKY3y4vOOHNXr8xftixxzdtVRf77zhgdpRsWr/CzQTDLHDvofjt0ggj89vxo2C5ZQ0NkBBCAwyysvCJytH9gMgAlWqvZn6R4SnmCPOLvuMDA8Ks0dUE13Z2BeJWmIndLs3vhWJ8JwSeqIz7ATtDw+tY4mZ+GKeZI8wPhrYIRhdmja4meGPwwemNKR+c0vy2jV+MnT+eqIz7AY8uDAxv9Xw388M4zRxhflGVNyxaImt0NcFPfG1BYIK/PxO7XZrfGy/G///jicq4H/CGMGPz7nEzP4zTzBHmB+PsCX8AyBpdTfBzC4Pxf387frw0vwPFx2Pnjycq435AGNa6xW7mh3GaOcL8hkVPMbJGVxO8/TPdoQlOxP/+C/Mr/nMPO0EIIeS/qE+DiUwwrKI6d3CE1WDN/CLzkp0nQFSHYXpa5wfODyaY1Pw0YIKoorpmfagGa+YXzV90ngBZHYbpaZ0fOD+YYFLz04AJRlVXx6wP1WDV/EJk5wmQ1WGYntb5gfODCSY1P43IBMMqqmvWh2qwZn7R///W+PsPZXUYpqd1fuD8YIJJzU8DJogqqmvWh2qwZn5Adp4AWR2G6WmdHyPivkCb+dEACSEtj3ofoMwEJbbOEZv5WRGZoGag6PV9pjBtvJ7W/KL5i0xQYuscsZmfDZkJagaKXt8x0bKb1vyAzAQlts4Rm/nZkJmgZqDo9T35V/P+vrTmB2QmKLF1jtjMz/qHKTJBzUDR6/v8aTMDTGt+0d+VyAQlts4Rm/nZkJmgZqDo9R07JjJAi/nRAAkhLY/zt8LJTDBpz65qWloGKIBJApn1Vcv81PkrmWDSnl11/koGKIFJApn1Vcv8NLRMMGnProaWAUpgkkBmfdUyPw0tE0zas6v+/29N1oMMkwQy66uW+annqWSCSXt2NbQMUAKTBCVZn6P50QAJITTApAaomWCJqYlqrI2nC285Hf/GeVfFvl4r87OZYMkntajG2jhyqN3p+Pnr4nuNa2V+NhOUyGqsjXf2z"+
                                  "TodvyMfP71amZ/NBCWyGmtj8Pw+p+Mv9z4W+3qtzM9mghJZjbUx89yf3U7gptsURXQzPxogIYQG6GqA0SfXVUv8Hfu+eVdFJpjUABttfpL93wlM8OaNlZlgUgNstPlJPvXjDn/+G+9bU5EJJjXARptfiXB07vfnf8fXeysywaQG2GjzkyzadtCfP6q0aU0wsQFW2fxogIQQGmBaA0xqgraeXpsBZs38XE3Q1tNrM8CsmZ+rCdp6em0GmDXzczVBW0+vzQCzZn6uJmjr6bUaYI3MjwZICGl52it9g75zU7lyJmh7WosrWTE/0Ls9OA/NBG1Pa3ElK+YHXn7wQq6cCdqe1uJKVswP9Bd6c+VM0Pa0FleyYn5getOKXDkTtD2txV25q2N+NEBCSMtTcQZYkmkoJqhlgVoGKLO/rJmfhmaCWhaoZYAy+8ua+WloJqhlgVoGKLO/rJmfKiiKCWpZoJYByuwva+anoZmglgWqGaDM/qpsfjRAQkjL017tN9QywbRZYLOYH9AywbRZYLOYH9AywbRZYLOYH9AywbRZYLOYH9AywdRZYI3MjwZICKEB1uqN1eqw5b5AZH/NZn5JTVD7FjeA7K/ZzC+pCWrf4gaQ/TWb+SU1Qe1b3ACyv2Yzv6QmqH2LWwSyvxqbHw2QENLyVL0KrAETlFmgrAIfDZfNan4aMEGZBcoq8LF3c01tfhowQZkFyirwxVP/bmrz04AJyixQVoHHvONNbX4aMEGZBZZUgUf218X8aICEEBpgvQxQmiCAAV6u5qeZIIABXq7mp5kggAFeruanmWD09xAa4OVqfpoJgsgA62x+NEBCCA2w3gYIfnLFfP/AzV7tTcuf+gITbPZqb1p67m/359/s1d60/DC3w59/s1d7U194tuwOLjx1qvbSAAkhRPAfAQYAvFcBUPm+KwgAAAAASUVORK5CYII=", 
                                  64,64)    
  GroundTileSet=LoadImageSheet("ground_24x1", 
                             "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAAgCAIAAABl+ouiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACFdJREFUeNrsnb9vHEUUx/csO7biOMZKDiXOJUYyFGlIKEAukIxEkICCAoEokpICF6n5D/gXaNJQRpEokDAFFKSzSBFAkdIkEoeNExFL5mxicY4Uc7Nv7/zs3Zl782tvz/l+istlb+ft7Jvdp/0+z7ytfXX9epIkl862O5/jk9NJONpPW53P3x6ND8Q+/epzxMH2P559yfa3Xp3o2fnlwX8GD9v2X97Kxz+StlUeX2r7ZKPW+ayf3gvef2q79udI57Nx4bmnfV1vtx6rK+fJ5jO1fWas83nyzITDGJn9IPH/7NhuEof1Z8dg38G+fLu5h279l7fy8Y+kbZXHN3b/w9q3vdLKOceRBAAAAAAABGWUnst4DiMUZHN2bGuA9n2OWIX+6yBNn4dUvtm+ZHv7aZttKb5C3Povb+XjH0nbKo9vlqfZiNX/bh5oO4h9XW+fbCr9dn7px87n6tfvqV+n2g5jZPZDv3NUWbTp4+pMWztTAceXbK63Tr2A9knT5+EqX2dfsl3SQ7f+y1v5+If2T9h55dtWeXzL6f+pZyq3nYyFGal8b+kqvfz5cufz1xsfCq/PsD5EBgsAAAAAIHQGCy6wpb09nhycWcJ1eWz4fJR/zrzS2/7S4z8O/fpi+ids/sn63AX5FUn2MTZrTZUTWln4QZ3p7x+kR/e1eft1Ze1q67ND22/dVVfCguUVnpHmrrJ8SdrnJKkZ2g72yi+T2HN3zNCcOV38gX/8ybIylkjyK5LsYzmsLKjc0mIaf/yh+PPRg7cL489rlldO9p3lU++z7zryPkQGCwAAAAAgMEc8g2W75kiksNPcDJ9Z0pgq+7y4djywZaMZ6Yj5VZldj9Uq6B//a4avX5PA17jpriXb7KMuJ+RPY+5k53NhRc1LqKerCP3JlOgcO0pq+ZP199V/BEfR+WdOcHSdD0lTHjt+QmUFku2APiSbszsm+7TdzO7Ov33tT9XPqS1s7eflpeX9+8tpBMcnz6X2tw7Zl4yROf5074Vi+5LteQvkjUb9JIs/ew7+kZ+1m39421bT1Fbvh+ne2dnGH/JPW+Nn6o85+8g9/930zV78kfdfHmPN8cd2pCj+TKWRjfasJ+pML1H8Ods22M/u052k0D+JZfyh7CPZRAYLAAAAAGA4M1huVan81wDSXBPz3+MluYcD6j994t77/l2hdow3J+nl82/2vv+9eifS2JF/Mi21scV+qVXc"+"Pz7Iay/xXFdjsr9lefYxnxOyhVe6KrqzRgz7mO/f3Xe+VSrt548TfS7TDVvtaPYhh3RwqPiTX+HoGn9OJPpVugfvOMQfxB/En/Dxh99r/vGHcldkExksAAAAAIDARM9gZXPyN3YL1ZhZtfhUJ6JWjTlloZFtm3B49qf+N3y0SNA5SZmeu6eelO/cfdTbTvo47Coqrht0/qE673VxhjKvNqo8Z0tyBeoyDW7qn1+NNAcrm8NkqRoJ7lWu7yX75PX07dmbPV17O12bs8hW9pW/gk+SQUH8QfxB/EH8GVT8QQYLAAAAACAw0TNYXNnIFYb"+
                             "8L8oyveL+7N+dOTHh2RPbakASHUmrJGLTp343UxgyFVUr1OVh/VNNdOq/e6Xtq0ZSaYtJOgdCoMz4uwVJEZI/V+6mP6f1Zj59Y6ynFPP7kOepMg2t7pm/eLjn2XrGdE4G/y6/40JBa3b+utcs9DDiD+IP4g/iTxXiDzJYAAAAAACBKWkVoe276mz/olxl3KoBSbRIRJUjqb+SjhHpHtsMQTYnxluXD6+OzKt/8nm+rnE2/4Apy/zo8/HKtHiqArkiXF1JCvfh8C18BVxjcsJBHUrWB+ng8xs4NNfB9o0FiD+IP4g/iD/lxx9ksAAAAAAAAnNEKrn71dlyr58RtoaKrpI1J947ByVrdgpUQnPLM0MgUdi248tHVtc2bPUmn+uT+003+leef6FG//T+6PMx6ip4VcV4nmYnpDMY6Hv7QuuQnrvK9ulDtk5HqvVt1wcVZC80c0SIGKvVEH8QfxB/EH9ixB9ksAAAAAAAAjP0GSy3OjddfHVYjBoq5kqy5bxzUEKf+sKBtLXr+NYEbWtCb0gqKZut5Vc58TkNvK3b6JsVfLf/2y5aX7OFV1ImHt5X9vmsC5ppkV9DNH9xqq+OpDkivB66fJ5NmRkCxB/EH8QfxB/duCCDBQAAAAAQmKHPYNnWufFXTnkkNVRizFoIpRf18wPcsdXWOv/4jK+ugjY/R916Jf0b0FzyEPn+k3ZspO9+N/fEH1Jg55d+Ut+/uZL2x1LBpxa46qVKygupahw/vtfzA18HxL/fSpZ798ha02WNnk2tI2mGAPEH8QfxB/EnXvxBBgsAAAAAIDBHZBWhz1vDyoFrBQnmOhz+6OYH+L+FzVZbS/wTY3x1FY/cVjOZlXe+/6ThdPuHHX3y7UM2/0DuSa7gCyopX5T2YT63v61udpsDEU+XI/4g/iD+IP6YxwIZLAAAAACAwIzCBV66UFwlWfLMXmYdoPzcgrBvYbOtH1019V9+f+KNPs05WFlQMxjGs1rMLmq7HAUfqg9HryY74g/iD+LPcMUfZLAAAAAAAAIzyp+XfVbB6J/Ba1b25a3c7Mfuv799Um8NbbsJT/t8Oz+j/BO9vP4KxjeUffnoy+3XE/Urrampp2o+7EjF849PH3B9Iv5gfBF/Bht/kMECAAAAAAjMKK3moLqlMf7u62/f3Kr6/a+y/aIj1qx6gvEdRvtljm9Y+7Z9wPWJ+IPxRfwZVPxBBgsAAAAAIDC1L69d6/wzPTOTdNcI0DMdfXd7HuR2WpubDvZ1+wyL/dj+GXb78D/sy+3Lj4j4g+sH/of96sQfZLAAAAAAAALzvwADAHnI3o0Q581fAAAAAElFTkSuQmCC");    
  DisplaceFilter=CreateDisplacementFilter("data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAALCACAAIABAREA/8QAFwABAQEBAAAAAAAAAAAAAAAACAcGCv/EAD0QAAADAgoFCgUFAQEAAAAAAAABBhGBAgMEITFEcbHBwjM0QVFyBRMUIzJDYZGh8BIiJDXRB1KC4fGy0v/aAAgBAQAAPwDqvW9EosK4DBf1h2YB9f1h2YGaVyOIKXyeP5mLMpKwpMc5N8KfEyZQLGioszjYhsxGbWTsZscUzG0+BGGsgKu/KGwgKu/KLApIr6MqTIju3NaVHgbW0Air7tnw4mBgt9DKbTuMDRbQ4UTClBQoRzTNm8m7pmWbzpwyc1iBYFKh6sFskormYUQU5f2f4mPdYFkjO4dgEfyHqZWlcYw63olFhXAUL+sOzAPLzSyiwrjB7lmsFxniKoiIR861pzMZ4WBsoCrvyhsICrvyixqf7Y8soIS+mhR/hBJnhOYHi1IoqLlDbXn7wZsAkX9YdmGCTmsQLAtEQ1knZSw2W7AsEbVzrDKGHR72UBYpOr/xCP5D1MrSuMYdb0SiwrgKF/WHZgHl5pZRYVxg9yzWC4zxFVRPU8wdp2+2em3a0UFHaAicw/Odk1heBhvoCrvyixqf7Y8soHi+hGUKUM/aV5gfrgzOKlJmbTadxgTLzSyiwrjGDTmsQLAtEETSiC3lCLzIgsUb1PR2zs9G+WAWCTq/8Qj+Q9TK0rjGGW3Yj+GDcQFK/rDswD6/rDswOcrMylBGX7zxFdRGmk1hXkGegKu/KHAgKu/KLGp/tjyygdL/ALco4SvhAgrisgPLzSyiwrjGDTmsQLAtUPHav+Lm+rXBXI7SxHU/DsI2lNNSRMpKfybtCzRuhk1hXBH8hGZSMmbyxGOW9EosK4CBf1h2YB9f1h2YHqWawXGeIqyI00msK8g10BV35Q4EBV35RY1P9seWUDlfdiUWHmA8WhnCipSZm02HcBIvNLKLCuMYNOaxAsCuRHU9H+nm9Z59zdm8K5HRrYyTlMRnaU9vtoXCI0MmtK4gnOR9Tg24DBLbsR/DBuICFf1h2YCdf1h2YHKWawXGeIqiN00mtK8NlAVd+UOBAVd+UWFQ/NydPPPBuIDtfdiUWHmA7W58zFSjfh7YeAEy80v8TxGCTmsQLArUPVgsUjppPZiYWyI0MmtK4gkeQjMpGTN5YjGrbsR/DBuICpeaKUWleYDy/rDswNUs1guM8RXUPVg2EBV35Q4EBV35RYVFqJ2nlBCXnyxxQSoODOW8/ihT2gZrisgTLzSyiwrjGDTmsQLApUnoupb40MY+ZtrguUbE9VJ6fGgvyfoFeiep5grSt9s9Nu1L8h6mVpXGMctuxH8MG4gKV/WHZgIP1C7cosLAGmWawXGeIrqHqwbH6fdR0fY3Dzpb6T0hwICrvyiyKOJLoTWkZNZtm8GH+W0GW0DhewuahSidvwsKYvZbLCY4DpbxXMxTTafiW1t9zwJl5pZRYVxjBpzWIFgWqHYyTtoYbbNoV6NjuZ6OUTOT91G"+
                                          "6jYFijO4dgEfyHqZWlcYx63olFhXAUL+sOzAPr+sOzA5SzWC4zxFVQ9WDYQFXflDgQFXflFhUfyyE2zTmf/P+egGy4rIH63juqlF7dvjum8vIC5eaWUWFcYnac1iBYFqh6sFwjeq6O1+xjfLBjgqEZ3DsAm+R9Tg24DBreiUWFcBQv6w7MA8vNLKLCuMHuWawXGeIqyI00msK8gz0BV35Q4EBV35RY1P9seWUDZd9uV8R3mB4t9DKbTuMDBf1h2YYJOaxAsC1Q9WCwSXM/T4uo2WbKQqEPVgl+Q9TK0rjGHW9EosK4Chf1h2YCdeROsmfhSTqMbS3A9SuJ+pLZPM0meuzeKqiInrZPczZ4b5/PzDRQeik9p3kGugKu/KLGp/tjyygbLvtyviO8wRFvoZTadxgTrzSyiwrjGDTmsQLAtUPVgsEZ3DsAsEZ/wCQj+Q9TK0rjGGXnYjuGBcYFK/rDswFy80sosK4we5ZrBcZ4imI3TSa0rw0UBV35Q2EBV35RY1P9seWUDhefNGSpk7Wf8kB6vjKKOUGVm3+95EwCxeaWUWFcYwac1iBYFqh6sFgjO4dgFgjO4dgEnyPqcG3AYJbdiP4YNxAYryJ1kz8KSdRjaW4Cdf1h2YHKWawXGeIqqHqwaCAq78obCAq78osSmLmZE32z1on2fkDpflzcOUfBPROR+BbWnvJr2ger2KIukYHbvLwncBGvNLKLCuMYNOaxAsC1Q9WDARncOwCoRncOwCQ5I1CA7AYZb0SiwrgMF/WHZgJ1/WHZgcpZrBcZ4inIimT2neGeg+p6OzY33tayfzmDgQFXflFjU2pladwHa+gmcKUMKb4SLZvMDlbwIXMymbae0tx+IFC8ieuhHuKk2zM9N8+2igYJOxRdIItu1/mW/YW/YQWaDitXO02s8zZebt4YCM7h2AVCM7h2ASfI+pwbcBg1vRKLCuAwX9YdmAnX9YdmBylmsFxniKajO4dgGggKu/KG3+n0GF8cnNnh78/ywWhT/bHllBBXxkcKUGX7SvMDpZ9+/ECpfQIXxR5fCdMFpMbvb/jhiE5FF00p9u30aZ+ypoIK1EdTFSfyJ+y/wDO0LZHGUb0dpkU0+82WmdNG0KlGdw7AJPkfU4NuAwa3olFhXAYL+sOzATr+sOzA4SqFBhSgigmRn8Z4inozuHYBsICrvyhsICrvyiwKGERcnsMyIzMmeRAer/tyjhK+EBys+/fiCAt9NKbDvMYFPQIHSO0U1Ow7fZTsaYVaHOD9O0yonn2T/2FUjeY+nf5/wCdkLBJ1f8AiEfyHqZWlcY//9k=",
                                          5,20)      
EndProcedure

Procedure ParticleBurst(pointer) 

    ;//  Position the emitter where the mouse/touch event was
    !emitter.x = game.camera.x+v_pointer.x;
    !emitter.y = game.camera.y+v_pointer.y;

    ;//  The first parameter sets the effect To "explode" which means all particles are emitted at once
    ;//  The second gives each particle a 2000ms lifespan
    ;//  The third is ignored when using burst/explode mode
    ;//  The final parameter (10) is how many particles will be emitted in this single burst
    !emitter.start(true, 2000, null, 10);

EndProcedure

Procedure CreateGame()
  SetScreenBackColor($642C28)
  
  TileMap=CreateTileMap("ground_24x1")  
  TileLayer1=CreateTileLayer("layer1", TileMap, 40, 30, 32, 32, 0.5, 0.5)
  TileLayer2=CreateTileLayer("layer2", TileMap, 40, 30, 32, 32)
  SetEntityAlpha(TileLayer1,0.2)
  SetEntityFilters(TileLayer1,DisplaceFilter)  
  !v_TileLayer1.resizeWorld();
  
  For x=0 To TileLayerWidth(TileLayer1)
    For y=0 To TileLayerHeight(TileLayer1)
      tile=RandomInteger(0,23)
      If RandomInteger(0,100)<30 : UpdateTileLayer(TileLayer1,tile,x,y) : EndIf 
      If x=0 Or y=0 Or x=39 Or y=29 : UpdateTileLayer(TileLayer2,1,x,y) : EndIf 
      tile=RandomInteger(0,23)
      If RandomInteger(0,100)<40 : UpdateTileLayer(TileLayer2,tile,x,y) : EndIf 
    Next     
  Next     
  
  !window.cursors = game.input.keyboard.createCursorKeys();
  
  
  

  
  !window.emitter = game.add.emitter(0, 0, 100);
  !emitter.makeParticles('diamond_5x1',[0,1,2,3,4],undefined,true);
  !emitter.gravity = 200;
  !emitter.blendMode=PIXI.blendModes.ADD;
  !emitter.setScale(0.1, 1, 0.1, 1, 2000);

  
  *pt=@ParticleBurst()
  !game.input.onDown.add(p_pt, this);

EndProcedure

Procedure UpdateGame()
  !;if (cursors.left.isDown)
  !{
  !    game.camera.x -= 4;
  !}
  !; if (cursors.right.isDown)
  !{
  !    game.camera.x += 4;
  !}
  !;if (cursors.up.isDown)
  !{
  !    game.camera.y -= 4;
  !}
  !; if (cursors.down.isDown)
  !{
  !    game.camera.y += 4;
  !}
  !v_TileLayer1.filters[0].offset.x+=5;
EndProcedure

Procedure RenderGame()
EndProcedure

ScriptLoaded()


Re: Sprite and Special FX (Pixi / Phaser)

Posted: Sat Apr 19, 2014 1:59 pm
by Paul
Just a blank screen here using latest FireFox (28.0)

Re: Sprite and Special FX (Pixi / Phaser)

Posted: Sat Apr 19, 2014 2:32 pm
by eddy
Paul wrote:Just a blank screen here using latest FireFox (28.0)
Did you test the first example or the second one ?

For the first example, you'll need :
  • to disable the debug mode
  • two image
    • panda.png
    • displacement_map.jpg (greyscale image)
Image

Re: Sprite and Special FX (Pixi / Phaser)

Posted: Sun Apr 20, 2014 1:50 pm
by Paul
Tested both examples using both debugger on and off and both open FireFox and only show tan color screen.
What are you using to view?

Re: Sprite and Special FX (Pixi / Phaser)

Posted: Tue Apr 22, 2014 4:41 pm
by eddy
I'm using Chrome browser for my tests because SpiderBasic is in alpha version for the moment.

If you have some time, you can test these demos: These are short examples of what you can achieve using this 2D engine or this game frameworks.

Re: Sprite and Special FX (Pixi / Phaser)

Posted: Tue Apr 22, 2014 9:49 pm
by Paul
eddy wrote:I'm using Chrome browser for my tests because SpiderBasic is in alpha version for the moment.

If you have some time, you can test these demos: These are short examples of what you can achieve using this 2D engine or this game frameworks.

These demos both work fine in FireFox. Just the above examples in SpiderBasic won't work in FireFox. Too Bad :(

Re: Sprite and Special FX (Pixi / Phaser)

Posted: Wed Apr 23, 2014 3:49 am
by flaith
Both worked for me ;)

Re: Sprite and Special FX (Pixi / Phaser)

Posted: Mon Apr 06, 2015 5:46 pm
by eddy
PIXI example updated
- fixed loading of plugins and images